fix(react-components): adopt Cogs chips and fix 360 image details panel appearance

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

@@ -44,7 +44,7 @@ export function CadModelContainer({
     addModel(addModelOptions, transform)
       .then((model) => {
         onLoad?.(model);
-        setRevealResourcesCount(viewer.models.length);
+        setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length);
       })
       .catch((error) => {
         const errorReportFunction = onLoadError ?? defaultLoadErrorHandler;
@@ -98,7 +98,7 @@ export function CadModelContainer({
       return;
 
     viewer.removeModel(model);
-    setRevealResourcesCount(viewer.models.length);
+    setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length);
     setModel(undefined);
   }
 }

react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx

@@ -15,6 +15,7 @@ import {
   DEFAULT_IMAGE360_ICON_COUNT_LIMIT,
   DEFAULT_IMAGE360_ICON_CULLING_RADIUS
 } from './constants';
+import { useReveal3DResourcesCount } from '../Reveal3DResources/Reveal3DResourcesCountContext';
 
 type Image360CollectionContainerProps = {
   addImage360CollectionOptions: AddImage360CollectionOptions;
@@ -32,6 +33,7 @@ export function Image360CollectionContainer({
   const cachedViewerRef = useRevealKeepAlive();
   const modelRef = useRef<Image360Collection>();
   const viewer = useReveal();
+  const { setRevealResourcesCount } = useReveal3DResourcesCount();
 
   const initializingSiteId = useRef<{ siteId: string } | { externalId: string } | undefined>(
     undefined
@@ -82,6 +84,7 @@ export function Image360CollectionContainer({
 
         modelRef.current = image360Collection;
         onLoad?.(image360Collection);
+        setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length);
       })
       .catch((error: any) => {
         const errorReportFunction = onLoadError ?? defaultLoadErrorHandler;
@@ -121,6 +124,7 @@ export function Image360CollectionContainer({
       return;
 
     viewer.remove360ImageSet(modelRef.current);
+    setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length);
     modelRef.current = undefined;
   }
 }

react-components/src/components/Image360Details/Image360Details.tsx

@@ -8,6 +8,7 @@ import { Image360HistoricalDetails } from '../Image360HistoricalDetails/Image360
 import { type Image360 } from '@cognite/reveal';
 import { Button } from '@cognite/cogs.js';
 import { useReveal } from '../RevealCanvas/ViewerContext';
+import { useImage360Collections } from '../../hooks/useImage360Collections';
 
 type Image360DetailsProps = {
   appLanguage?: string;
@@ -21,15 +22,15 @@ export function Image360Details({ appLanguage }: Image360DetailsProps): ReactEle
     setIs360HistoricalPanelExpanded(isExpanded);
   }, []);
 
-  const clearEnteredImage360 = (): void => {
+  const clearEnteredImage360 = useCallback((): void => {
     setEnteredEntity(undefined);
-  };
+  }, [setEnteredEntity]);
 
-  const exitImage360Image = (): void => {
+  const exitImage360Image = useCallback((): void => {
     viewer.exit360Image();
-  };
+  }, [viewer]);
 
-  const collections = viewer.get360ImageCollections();
+  const collections = useImage360Collections();
 
   useEffect(() => {
     collections.forEach((collection) => {
@@ -42,7 +43,7 @@ export function Image360Details({ appLanguage }: Image360DetailsProps): ReactEle
         collection.off('image360Exited', clearEnteredImage360);
       });
     };
-  }, [viewer, collections]);
+  }, [viewer, collections, setEnteredEntity, clearEnteredImage360]);
 
   return (
     <>

react-components/src/components/Image360HistoricalDetails/Panel/Image360HistoricalPanel.tsx

@@ -33,7 +33,7 @@ export const Image360HistoricalPanel = ({
           {!revisionDetailsExpanded && (
             <StyledButton type="tertiary">
               {t('IMAGES_360_DETAILS', '360 Details')}
-              <StyledChipCount counter={revisionCount} label={' Historic'} />
+              <CounterChip counter={revisionCount} label={' Historic'} />
             </StyledButton>
           )}
           {revisionDetailsExpanded && (
@@ -69,16 +69,6 @@ const StyledToolBar = styled.div<{ isExpanded: boolean }>`
   background: #ffffff;
 `;
 
-const StyledChipCount = styled(CounterChip)`
-  && {
-    width: fit-content;
-    height: 20px;
-    max-height: 20px;
-    min-height: 20px;
-    min-width: 20px;
-  }
-`;
-
 const Container = styled.div<{ isExpanded: boolean }>`
   position: relative;
   left: calc(100% - 200px);

react-components/src/components/PointCloudContainer/PointCloudContainer.tsx

@@ -47,7 +47,7 @@ export function PointCloudContainer({
     addModel(modelId, revisionId, transform)
       .then((pointCloudModel) => {
         onLoad?.(pointCloudModel);
-        setRevealResourcesCount(viewer.models.length);
+        setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length);
       })
       .catch((error) => {
         const errorHandler = onLoadError ?? defaultLoadErrorHandler;
@@ -101,7 +101,7 @@ export function PointCloudContainer({
       return;
 
     viewer.removeModel(model);
-    setRevealResourcesCount(viewer.models.length);
+    setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length);
     setModel(undefined);
   }
 }

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

@@ -1,10 +1,10 @@
 /*!
  * Copyright 2024 Cognite AS
  */
-import { Checkbox, Flex } from '@cognite/cogs.js';
+import { Checkbox, CounterChip, Flex } from '@cognite/cogs.js';
 import { type ModelHandler } from './ModelHandler';
 import { type ChangeEvent, useCallback, useMemo, type ReactElement, type MouseEvent } from 'react';
-import { StyledChipCount, StyledLabel } from './elements';
+import { StyledLabel } from './elements';
 import { type UpdateModelHandlersCallback } from './useModelHandlers';
 import { useReveal } from '../../RevealCanvas/ViewerContext';
 
@@ -50,7 +50,7 @@ export const WholeLayerVisibilityToggle = ({
         onChange={handleToggleAllClick}
       />
       <StyledLabel> {label} </StyledLabel>
-      <StyledChipCount label={String(modelHandlers.length)} hideTooltip type="neutral" />
+      <CounterChip counter={modelHandlers.length} />
     </Flex>
   );
 };

react-components/src/components/RevealToolbar/LayersContainer/elements.ts

@@ -2,21 +2,8 @@
  * Copyright 2023 Cognite AS
  */
 
-import { Chip } from '@cognite/cogs.js';
 import styled from 'styled-components';
 
-export const StyledChipCount = styled(Chip)`
-  && {
-    border-radius: 2px;
-    width: fit-content;
-    height: 20px;
-    max-height: 20px;
-    min-height: 20px;
-    min-width: 20px;
-    padding: 4px;
-  }
-`;
-
 export const StyledLabel = styled.div`
   /* Font */
   font-family: 'Inter';

react-components/src/hooks/useImage360Collections.ts

@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { useMemo } from 'react';
+import { useReveal } from '../components/RevealCanvas/ViewerContext';
+import { type Image360Collection } from '@cognite/reveal';
+import { useReveal3DResourcesCount } from '../components/Reveal3DResources/Reveal3DResourcesCountContext';
+
+export const useImage360Collections = (): Image360Collection[] => {
+  const viewer = useReveal();
+  const { reveal3DResourcesCount: resourceCount } = useReveal3DResourcesCount();
+
+  return useMemo(() => {
+    return viewer.get360ImageCollections();
+  }, [viewer, resourceCount]);
+};

react-components/stories/Image360Details.stories.tsx

@@ -2,10 +2,10 @@
  * Copyright 2023 Cognite AS
  */
 import type { Meta, StoryObj } from '@storybook/react';
-import { Image360CollectionContainer, Image360Details, RevealCanvas, RevealContext } from '../src';
-import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
+import { Image360CollectionContainer, Image360Details, RevealCanvas } from '../src';
 import { Color } from 'three';
 import { useState } from 'react';
+import { RevealStoryContext } from './utilities/RevealStoryContainer';
 
 const meta = {
   title: 'Example/Image360Details',
@@ -16,13 +16,11 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const sdk = createSdkByUrlToken();
-
 export const Main: Story = {
   render: () => {
     const [loading, setLoading] = useState(true);
     return (
-      <RevealContext sdk={sdk} color={new Color(0x4a4a4a)}>
+      <RevealStoryContext color={new Color(0x4a4a4a)}>
         <RevealCanvas>
           <Image360CollectionContainer
             addImage360CollectionOptions={{ siteId: 'c_RC_2' }}
@@ -32,7 +30,7 @@ export const Main: Story = {
           />
           {!loading && <Image360Details />}
         </RevealCanvas>
-      </RevealContext>
+      </RevealStoryContext>
     );
   }
 };