fix(react-components): update model when geometry filter changed (#4753)

* fix(react-components): update model when geometry filter changed

* Revert "fix(react-components): update model when geometry filter changed"

This reverts commit 5466ca5.

* fix: do the check otherwise, to avoid too much add/remove

* chore: be more strict in the add/remove-logic

It's a miracle this worked before

* chore: lint fix

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

@@ -2,16 +2,17 @@
  * Copyright 2023 Cognite AS
  */
 import { type ReactElement, useEffect, useState, useRef } from 'react';
-import { type AddModelOptions, type CogniteCadModel } from '@cognite/reveal';
+import { type GeometryFilter, type AddModelOptions, type CogniteCadModel } from '@cognite/reveal';
 import { useReveal } from '../RevealCanvas/ViewerContext';
-import { Matrix4 } from 'three';
+import { type Matrix4 } from 'three';
 import { useRevealKeepAlive } from '../RevealKeepAlive/RevealKeepAliveContext';
 import { useReveal3DResourcesCount } from '../Reveal3DResources/Reveal3DResourcesInfoContext';
 import { isEqual } from 'lodash';
 import { modelExists } from '../../utilities/modelExists';
 import { getViewerResourceCount } from '../../utilities/getViewerResourceCount';
 import { type CadModelStyling } from './types';
 import { useApplyCadModelStyling } from './useApplyCadModelStyling';
+import { isSameGeometryFilter, isSameModel } from '../../utilities/isSameModel';
 
 export type CogniteCadModelProps = {
   addModelOptions: AddModelOptions;
@@ -32,6 +33,7 @@ export function CadModelContainer({
   const viewer = useReveal();
   const { setRevealResourcesCount } = useReveal3DResourcesCount();
   const initializingModel = useRef<AddModelOptions | undefined>(undefined);
+  const initializingModelsGeometryFilter = useRef<GeometryFilter | undefined>(undefined);
 
   const [model, setModel] = useState<CogniteCadModel | undefined>(undefined);
 
@@ -62,7 +64,12 @@ export function CadModelContainer({
 
   useApplyCadModelStyling(model, styling);
 
-  useEffect(() => removeModel, [model]);
+  useEffect(
+    () => () => {
+      removeModel(model);
+    },
+    [model]
+  );
 
   return <></>;
 
@@ -82,26 +89,26 @@ export function CadModelContainer({
     async function getOrAddModel(): Promise<CogniteCadModel> {
       const viewerModel = viewer.models.find(
         (model) =>
-          model.modelId === modelId &&
-          model.revisionId === revisionId &&
-          model.getModelTransformation().equals(transform ?? new Matrix4())
+          isSameModel(model, addModelOptions) &&
+          isSameGeometryFilter(geometryFilter, initializingModelsGeometryFilter.current)
       );
+
       if (viewerModel !== undefined) {
         return await Promise.resolve(viewerModel as CogniteCadModel);
       }
+      initializingModelsGeometryFilter.current = geometryFilter;
       return await viewer.addCadModel(addModelOptions);
     }
   }
 
-  function removeModel(): void {
+  function removeModel(model: CogniteCadModel | undefined): void {
     if (!modelExists(model, viewer)) return;
 
     if (cachedViewerRef !== undefined && !cachedViewerRef.isRevealContainerMountedRef.current)
       return;
 
     viewer.removeModel(model);
     setRevealResourcesCount(getViewerResourceCount(viewer));
-    setModel(undefined);
   }
 }
 

react-components/src/utilities/isSameModel.ts

@@ -22,7 +22,7 @@ export function isSameCadModel(model0: CadModelOptions, model1: CadModelOptions)
   );
 }
 
-function isSameGeometryFilter(
+export function isSameGeometryFilter(
   filter0: GeometryFilter | undefined,
   filter1: GeometryFilter | undefined
 ): boolean {