feat(react-components): allow user to configure default layer visibil…

…ity and bump to 0.55.0 (#4681)

* fix(react-components): show only CAD models by default

* feat: add configuration opportunity for default model visibility

* chore: lint fix

* chore: bump to 0.55.0

react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.54.2",
+  "version": "0.55.0",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@cognite/cogs.js": ">=9.84.3",
-    "@cognite/reveal": "4.15.1",
+    "@cognite/reveal": "4.16.1",
     "react": ">=18",
     "react-dom": ">=18",
     "styled-components": ">=5"
@@ -44,7 +44,7 @@
     "@cognite/cdf-i18n-utils": "^0.7.5",
     "@cognite/cdf-utilities": "^3.6.0",
     "@cognite/cogs.js": "^9.84.3",
-    "@cognite/reveal": "^4.15.1",
+    "@cognite/reveal": "^4.16.1",
     "@cognite/sdk": "^9.13.0",
     "@playwright/test": "^1.43.1",
     "@storybook/addon-essentials": "^8.0.9",

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

@@ -11,21 +11,26 @@ import { useTranslation } from '../i18n/I18n';
 
 import { useSyncExternalLayersState } from './LayersContainer/useSyncExternalLayersState';
 import { useModelHandlers } from './LayersContainer/useModelHandlers';
-import { type LayersUrlStateParam } from '../../hooks/types';
+import { type DefaultLayersConfiguration, type LayersUrlStateParam } from '../../hooks/types';
 
-type LayersButtonProps = {
+export type LayersButtonProps = {
   layersState?: LayersUrlStateParam | undefined;
   setLayersState?: Dispatch<SetStateAction<LayersUrlStateParam | undefined>> | undefined;
+  defaultLayerConfiguration?: DefaultLayersConfiguration | undefined;
 };
 
 export const LayersButton = ({
   layersState: externalLayersState,
-  setLayersState: setExternalLayersState
+  setLayersState: setExternalLayersState,
+  defaultLayerConfiguration
 }: LayersButtonProps): ReactElement => {
   const viewer = useReveal();
   const { t } = useTranslation();
 
-  const [modelLayerHandlers, update] = useModelHandlers(setExternalLayersState);
+  const [modelLayerHandlers, update] = useModelHandlers(
+    setExternalLayersState,
+    defaultLayerConfiguration
+  );
 
   useSyncExternalLayersState(
     modelLayerHandlers,

react-components/src/components/RevealToolbar/LayersContainer/LayersButtonsStrip.tsx

@@ -9,16 +9,11 @@ import {
 } from './ModelHandler';
 import { ModelLayersButton } from './ModelLayersButton';
 
-import { type ReactElement, type Dispatch, type SetStateAction } from 'react';
+import { type ReactElement } from 'react';
 import { useTranslation } from '../../i18n/I18n';
-import { type LayersUrlStateParam } from '../../../hooks/types';
 import { useModelHandlers } from './useModelHandlers';
 import { useSyncExternalLayersState } from './useSyncExternalLayersState';
-
-export type LayersButtonStripProps = {
-  externalLayersState?: LayersUrlStateParam;
-  setExternalLayersState?: Dispatch<SetStateAction<LayersUrlStateParam | undefined>>;
-};
+import { type LayersButtonProps } from '../LayersButton';
 
 export type ModelLayerHandlers = {
   cadHandlers: CadModelHandler[];
@@ -27,11 +22,15 @@ export type ModelLayerHandlers = {
 };
 
 export const LayersButtonStrip = ({
-  externalLayersState,
-  setExternalLayersState
-}: LayersButtonStripProps): ReactElement => {
+  layersState: externalLayersState,
+  setLayersState: setExternalLayersState,
+  defaultLayerConfiguration
+}: LayersButtonProps): ReactElement => {
   const { t } = useTranslation();
-  const [modelLayerHandlers, update] = useModelHandlers(setExternalLayersState);
+  const [modelLayerHandlers, update] = useModelHandlers(
+    setExternalLayersState,
+    defaultLayerConfiguration
+  );
   const { cadHandlers, pointCloudHandlers, image360Handlers } = modelLayerHandlers;
 
   useSyncExternalLayersState(

react-components/src/components/RevealToolbar/LayersContainer/updateViewerFromExternalState.tsx

@@ -13,7 +13,6 @@ export function updateViewerFromExternalState(
   viewer: Cognite3DViewer
 ): void {
   if (layersState === undefined) {
-    setAllModelsVisible(viewer);
     return;
   }
 
@@ -44,11 +43,3 @@ export function updateViewerFromExternalState(
       ?.setIconsVisibility(layer.applied);
   });
 }
-
-function setAllModelsVisible(viewer: Cognite3DViewer): void {
-  viewer.models.forEach((model) => (model.visible = true));
-
-  viewer.get360ImageCollections().forEach((collection) => {
-    collection.setIconsVisibility(true);
-  });
-}

react-components/src/components/RevealToolbar/LayersContainer/useModelHandlers.tsx

@@ -20,7 +20,7 @@ import {
 import { CadModelHandler, Image360CollectionHandler, PointCloudModelHandler } from './ModelHandler';
 import { use3dModels } from '../../../hooks/use3dModels';
 import { useReveal } from '../../RevealCanvas/ViewerContext';
-import { type LayersUrlStateParam } from '../../../hooks/types';
+import { type DefaultLayersConfiguration, type LayersUrlStateParam } from '../../../hooks/types';
 import { use3DModelName } from '../../../query/use3DModelName';
 
 export type UpdateModelHandlersCallback = (
@@ -29,7 +29,8 @@ export type UpdateModelHandlersCallback = (
 ) => void;
 
 export const useModelHandlers = (
-  setExternalLayersState: Dispatch<SetStateAction<LayersUrlStateParam | undefined>> | undefined
+  setExternalLayersState: Dispatch<SetStateAction<LayersUrlStateParam | undefined>> | undefined,
+  defaultLayersConfig: DefaultLayersConfiguration | undefined
 ): [ModelLayerHandlers, UpdateModelHandlersCallback] => {
   const models = use3dModels();
   const viewer = useReveal();
@@ -46,7 +47,9 @@ export const useModelHandlers = (
   );
 
   useEffect(() => {
-    setModelHandlers(createHandlers(models, modelNames.data, image360Collections, viewer));
+    const newHandlers = createHandlers(models, modelNames.data, image360Collections, viewer);
+    setDefaultConfigOnNewHandlers(newHandlers, modelHandlers, defaultLayersConfig);
+    setModelHandlers(newHandlers);
   }, [models, modelNames.data, image360Collections, viewer]);
 
   const update = useCallback(
@@ -122,3 +125,27 @@ function createExternalStateFromLayers(modelHandlers: ModelLayerHandlers): Layer
     }))
   };
 }
+
+function setDefaultConfigOnNewHandlers(
+  newHandlers: ModelLayerHandlers,
+  modelHandlers: ModelLayerHandlers,
+  defaultLayersConfig: DefaultLayersConfiguration | undefined
+): void {
+  newHandlers.cadHandlers.forEach((newHandler) => {
+    if (!modelHandlers.cadHandlers.some((oldHandler) => oldHandler.isSame(newHandler))) {
+      newHandler.setVisibility(defaultLayersConfig?.cad ?? true);
+    }
+  });
+
+  newHandlers.pointCloudHandlers.forEach((newHandler) => {
+    if (!modelHandlers.pointCloudHandlers.some((oldHandler) => oldHandler.isSame(newHandler))) {
+      newHandler.setVisibility(defaultLayersConfig?.pointcloud ?? true);
+    }
+  });
+
+  newHandlers.image360Handlers.forEach((newHandler) => {
+    if (!modelHandlers.image360Handlers.some((oldHandler) => oldHandler.isSame(newHandler))) {
+      newHandler.setVisibility(defaultLayersConfig?.image360 ?? true);
+    }
+  });
+}

react-components/src/hooks/types.ts

@@ -39,6 +39,12 @@ export type LayersUrlStateParam = {
   pointCloudLayers?: PointCloudLayersUrlStateParam[];
 };
 
+export type DefaultLayersConfiguration = {
+  cad: boolean;
+  pointcloud: boolean;
+  image360: boolean;
+};
+
 export type Reveal360AnnotationAssetData = {
   asset: Asset;
   assetAnnotationImage360Info: AssetAnnotationImage360Info;

react-components/src/index.ts

@@ -117,8 +117,10 @@ export {
   type PointCloudAnnotationMappedAssetData,
   type Image360AnnotationMappedAssetData,
   type LayersUrlStateParam,
+  type DefaultLayersConfiguration,
   type ThreeDModelFdmMappings
 } from './hooks/types';
+export { type LayersButtonProps } from './components/RevealToolbar/LayersButton';
 export type { CameraNavigationActions } from './hooks/useCameraNavigation';
 export type { Source, DmsUniqueIdentifier } from './data-providers/FdmSDK';
 export type { FdmInstanceWithView } from './data-providers/types';