fix(react-components): resources count when unreferenced model is rem…

…oved (#4757)

* fixed resources count update when unreferenced model is removed

* bump react-component version to 0.58.3

* fixed test failing

react-components/package.json

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

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

@@ -10,11 +10,14 @@ import {
 } from './typeGuards';
 import { useEffect } from 'react';
 import { isSameModel } from '../../utilities/isSameModel';
+import { useReveal3DResourcesCount } from './Reveal3DResourcesInfoContext';
+import { getViewerResourceCount } from '../../utilities/getViewerResourceCount';
 
 export function useRemoveNonReferencedModels(
   addOptions: AddResourceOptions[],
   viewer: Cognite3DViewer
 ): void {
+  const { setRevealResourcesCount } = useReveal3DResourcesCount();
   useEffect(() => {
     const nonReferencedModels = findNonReferencedModels(addOptions, viewer);
 
@@ -27,6 +30,7 @@ export function useRemoveNonReferencedModels(
     nonReferencedCollections.forEach((collection) => {
       viewer.remove360ImageSet(collection);
     });
+    setRevealResourcesCount(getViewerResourceCount(viewer));
   }, [addOptions]);
 }
 

react-components/tests/unit-tests/components/Reveal3DResources/useRemoveNonReferencedModels.test.ts → react-components/tests/unit-tests/components/Reveal3DResources/useRemoveNonReferencedModels.test.tsx

@@ -1,6 +1,5 @@
 import { describe, expect, test, vi, beforeEach } from 'vitest';
-
-import { Mock } from 'moq.ts';
+import React, { type JSX } from 'react';
 
 import { renderHook } from '@testing-library/react';
 
@@ -12,44 +11,68 @@ import {
   viewerModelsMock,
   viewerRemoveModelsMock
 } from '../../fixtures/viewer';
+import { Reveal3DResourcesInfoContextProvider } from '../../../../src/components/Reveal3DResources/Reveal3DResourcesInfoContext';
 import { cadMock, cadModelOptions } from '../../fixtures/cadModel';
 import { pointCloudMock, pointCloudModelOptions } from '../../fixtures/pointCloud';
 import { image360Mock, image360Options } from '../../fixtures/image360';
+import { EMPTY_ARRAY } from '../../../../src/utilities/constants';
 
 describe(useRemoveNonReferencedModels.name, () => {
   beforeEach(() => {
     vi.resetAllMocks();
   });
 
+  const wrapper = ({ children }: { children: React.ReactNode }): JSX.Element => (
+    <Reveal3DResourcesInfoContextProvider>{children}</Reveal3DResourcesInfoContextProvider>
+  );
   test('does not crash when no models are added', () => {
     viewerModelsMock.mockReturnValue([]);
     viewerImage360CollectionsMock.mockReturnValue([]);
-    expect(() => renderHook(() => useRemoveNonReferencedModels([], viewerMock))).not.toThrow();
+    expect(() =>
+      renderHook(
+        () => {
+          useRemoveNonReferencedModels(EMPTY_ARRAY, viewerMock);
+        },
+        { wrapper }
+      )
+    ).not.toThrow();
   });
 
   test('removes models when empty ', () => {
     viewerModelsMock.mockReturnValue([cadMock]);
     viewerImage360CollectionsMock.mockReturnValue([]);
-    renderHook(() => useRemoveNonReferencedModels([], viewerMock));
+    renderHook(
+      () => {
+        useRemoveNonReferencedModels(EMPTY_ARRAY, viewerMock);
+      },
+      { wrapper }
+    );
     expect(viewerRemoveModelsMock).toHaveBeenCalledOnce();
   });
 
   test('does not remove models when in addOptions', () => {
     viewerModelsMock.mockReturnValue([pointCloudMock, cadMock]);
     viewerImage360CollectionsMock.mockReturnValue([image360Mock]);
-    renderHook(() =>
-      useRemoveNonReferencedModels(
-        [cadModelOptions, pointCloudModelOptions, image360Options],
-        viewerMock
-      )
+    const mockAddOptions = [pointCloudModelOptions, cadModelOptions, image360Options];
+    renderHook(
+      () => {
+        useRemoveNonReferencedModels(mockAddOptions, viewerMock);
+      },
+      { wrapper }
     );
     expect(viewerRemoveModelsMock).not.toHaveBeenCalled();
   });
 
   test('removes only relevant model', () => {
     viewerModelsMock.mockReturnValue([pointCloudMock, cadMock]);
     viewerImage360CollectionsMock.mockReturnValue([image360Mock]);
-    renderHook(() => useRemoveNonReferencedModels([cadModelOptions, image360Options], viewerMock));
+    const mockAddOptions = [cadModelOptions, image360Options];
+    renderHook(
+      () => {
+        useRemoveNonReferencedModels(mockAddOptions, viewerMock);
+      },
+      { wrapper }
+    );
     expect(viewerRemoveModelsMock).toHaveBeenCalledWith(pointCloudMock);
   });
 });

react-components/tests/unit-tests/components/RevealCanvas/hooks/useCameraStateControl.test.ts

@@ -4,7 +4,7 @@ import { renderHook } from '@testing-library/react';
 
 import { viewerMock } from '../../../fixtures/viewer';
 import {
-  CameraStateParameters,
+  type CameraStateParameters,
   useCameraStateControl
 } from '../../../../../src/components/RevealCanvas/hooks/useCameraStateControl';
 import { Vector3 } from 'three';
@@ -28,20 +28,24 @@ describe(useCameraStateControl.name, () => {
   });
 
   test('does nothing when inputs are undefined', () => {
-    const { rerender } = renderHook(() => useCameraStateControl());
+    const { rerender } = renderHook(() => {
+      useCameraStateControl();
+    });
 
     vi.runAllTimers();
     rerender();
     vi.runAllTimers();
 
-    cameraManagerGlobalCameraEvents.cameraStop.forEach((mockCallback) =>
-      expect(mockCallback).not.toBeCalled()
-    );
+    cameraManagerGlobalCameraEvents.cameraStop.forEach((mockCallback) => {
+      expect(mockCallback).not.toBeCalled();
+    });
   });
 
   test('does nothing if external camera state is undefined', () => {
     const setter = vi.fn();
-    const { rerender } = renderHook(() => useCameraStateControl(undefined, setter));
+    const { rerender } = renderHook(() => {
+      useCameraStateControl(undefined, setter);
+    });
 
     vi.runAllTimers();
     rerender();
@@ -54,8 +58,9 @@ describe(useCameraStateControl.name, () => {
     const setter = vi.fn<[CameraStateParameters | undefined], void>();
 
     const { rerender } = renderHook(
-      ({ position }: { position: Vector3 }) =>
-        useCameraStateControl({ position: position.clone(), target: new Vector3(1, 1, 1) }, setter),
+      ({ position }: { position: Vector3 }) => {
+        useCameraStateControl({ position: position.clone(), target: new Vector3(1, 1, 1) }, setter);
+      },
       { initialProps: { position: new Vector3(0, 0, 0) } }
     );
 
@@ -65,20 +70,20 @@ describe(useCameraStateControl.name, () => {
     vi.runAllTimers();
     expect(setter).not.toBeCalled();
 
-    cameraManagerGlobalCameraEvents.cameraStop.forEach((mockCallback) =>
-      expect(mockCallback).toBeCalledTimes(1)
-    );
+    cameraManagerGlobalCameraEvents.cameraStop.forEach((mockCallback) => {
+      expect(mockCallback).toBeCalledTimes(1);
+    });
   });
 
   test('provided setter is called after updating camera state internally', () => {
     const setter = vi.fn<[CameraStateParameters | undefined], void>();
 
-    const { rerender } = renderHook(() =>
+    const { rerender } = renderHook(() => {
       useCameraStateControl(
         { position: new Vector3(0, 0, 0), target: new Vector3(1, 1, 1) },
         setter
-      )
-    );
+      );
+    });
 
     vi.runAllTimers();
 

react-components/tests/unit-tests/fixtures/cadModel.ts

@@ -1,4 +1,4 @@
-import { CogniteCadModel } from '@cognite/reveal';
+import { type CogniteCadModel } from '@cognite/reveal';
 import { Mock } from 'moq.ts';
 import { Matrix4 } from 'three';
 

react-components/tests/unit-tests/fixtures/viewer.ts

@@ -1,14 +1,7 @@
-import { vi, Mock as viMock } from 'vitest';
+import { vi } from 'vitest';
 
-import {
-  CameraManagerEventType,
-  Cognite3DViewer,
-  CogniteModel,
-  Image360Collection
-} from '@cognite/reveal';
+import { type Cognite3DViewer, type CogniteModel, type Image360Collection } from '@cognite/reveal';
 import { Mock, It } from 'moq.ts';
-import { Vector3 } from 'three';
-import { remove } from 'lodash';
 import { cameraManagerMock } from './cameraManager';
 
 const domElement = document.createElement('div').appendChild(document.createElement('canvas'));
@@ -18,7 +11,9 @@ export const viewerRemoveModelsMock = vi.fn<[CogniteModel], void>();
 export const viewerImage360CollectionsMock = vi.fn<[], Image360Collection[]>();
 
 export const viewerMock = new Mock<Cognite3DViewer>()
-  .setup((viewer) => viewer.setBackgroundColor(It.IsAny()))
+  .setup((viewer) => {
+    viewer.setBackgroundColor(It.IsAny());
+  })
   .returns()
   .setup((viewer) => viewer.domElement)
   .returns(domElement)