From 792cd83c8d60f4a871cb94d87c134aadb9d9c9f9 Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Thu, 13 Jul 2023 15:35:55 +0200
Subject: [PATCH 01/20] Initial layering component for Cad model

---
 .../components/RevealToolbar/LayersButton.tsx | 33 ++++++++
 .../LayersContainer/LayersContainer.tsx       | 84 +++++++++++++++++++
 .../RevealToolbar/RevealToolbar.tsx           |  3 +-
 react-components/stories/Toolbar.stories.tsx  |  8 +-
 4 files changed, 124 insertions(+), 4 deletions(-)
 create mode 100644 react-components/src/components/RevealToolbar/LayersButton.tsx
 create mode 100644 react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx

diff --git a/react-components/src/components/RevealToolbar/LayersButton.tsx b/react-components/src/components/RevealToolbar/LayersButton.tsx
new file mode 100644
index 00000000000..581ada98c89
--- /dev/null
+++ b/react-components/src/components/RevealToolbar/LayersButton.tsx
@@ -0,0 +1,33 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type ReactElement, useCallback, useState } from 'react';
+import { Button } from '@cognite/cogs.js';
+import { LayersContainer } from './LayersContainer/LayersContainer';
+import styled from 'styled-components';
+
+export const LayersButton = (): ReactElement => {
+  const [layersEnabled, setLayersEnabled] = useState(false);
+  const showLayers = () => {
+    setLayersEnabled(!layersEnabled);
+  };
+
+  return (
+    <LayersButtonContainer>
+      <Button
+        type="ghost"
+        icon="Layers"
+        aria-label="3D Resource layers"
+        onClick={showLayers} />
+        {layersEnabled && <LayersContainer />}
+    </LayersButtonContainer>
+  );
+};
+
+const LayersButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
new file mode 100644
index 00000000000..595c515428c
--- /dev/null
+++ b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
@@ -0,0 +1,84 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { useEffect, type ReactElement, useState } from 'react';
+
+import { useReveal } from '../../RevealContainer/RevealContext';
+import { Checkbox, Flex, Menu } from '@cognite/cogs.js';
+import styled from 'styled-components';
+import { CogniteCadModel } from '@cognite/reveal';
+
+export const LayersContainer = (): ReactElement => {
+  const viewer = useReveal();
+  const cadModels = viewer.models.filter((model) => model.type === 'cad');
+  const pointCloudModels = viewer.models.filter((model) => model.type === 'pointcloud');
+
+  const [cadModelVisible, setCadModelVisible] = useState(true);
+
+  const handleCadModelVisibility = (model: CogniteCadModel) => {
+    model.visible = !model.visible;
+    viewer.requestRedraw();
+  };
+
+  const handleAllCadModelsVisibility = (visible: boolean) => {
+    cadModels.forEach((model) => {
+      (model as CogniteCadModel).visible = visible;
+    });
+    viewer.requestRedraw();
+  };
+
+  const cadModelContent = () => {
+    return (<Menu>
+      {cadModels.length ? (
+        <>
+          {
+            cadModels.map((model) => <Menu.Item
+             key={model.modelId}
+             toggled = {(model as CogniteCadModel).visible}
+             hasCheckbox
+             onClick={() => handleCadModelVisibility(model as CogniteCadModel)}>
+              {model.modelId}
+            </Menu.Item>)
+          }
+        </>
+      )
+      : <Menu.Item>No CAD models</Menu.Item>}
+    </Menu>);
+  };
+
+  return (
+    <Container>
+      <StyleMenu>
+        <StyledCheckbox
+            checked={cadModelVisible}
+            onChange={(_, c) => handleAllCadModelsVisibility(!!c)}
+          />
+          <Menu.Submenu content = {cadModelContent()}>
+            CAD models
+          </Menu.Submenu>
+      </StyleMenu>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  position: absolute;
+  left: calc(100% + 10px);
+  top: calc(0%);
+`;
+
+// const InnerMenuItemContainer = styled(Menu.Item)`
+//   position: absolute;
+//   left: calc(100% + 10px);
+//   top: calc(0%);
+// `;
+
+const StyledCheckbox = styled(Checkbox)`
+  margin-left: 10px;
+`;
+
+const StyleMenu = styled(Menu)`
+  display: flex;
+  flex-direction: column;
+`;
diff --git a/react-components/src/components/RevealToolbar/RevealToolbar.tsx b/react-components/src/components/RevealToolbar/RevealToolbar.tsx
index 74777b0d1dd..9f2cc78a014 100644
--- a/react-components/src/components/RevealToolbar/RevealToolbar.tsx
+++ b/react-components/src/components/RevealToolbar/RevealToolbar.tsx
@@ -5,6 +5,7 @@
 import { type ReactElement } from 'react';
 import { Button, ToolBar, type ToolBarProps } from '@cognite/cogs.js';
 import { FitModelsButton } from './FitModelsButton';
+import { LayersButton } from './LayersButton';
 
 const defaultStyle: ToolBarProps = {
   style: {
@@ -21,7 +22,7 @@ export const RevealToolbar = (toolBarProps: ToolBarProps): ReactElement => {
   return (
     <ToolBar {...toolBarProps}>
       <>
-        <Button type="ghost" icon="Layers" aria-label="3D Resource layers" />
+        <LayersButton />
 
         <div className="cogs-toolbar-divider" />
 
diff --git a/react-components/stories/Toolbar.stories.tsx b/react-components/stories/Toolbar.stories.tsx
index 635f659dda1..685fab784a7 100644
--- a/react-components/stories/Toolbar.stories.tsx
+++ b/react-components/stories/Toolbar.stories.tsx
@@ -5,7 +5,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { CadModelContainer, RevealContainer, RevealToolbar } from '../src';
 import { CogniteClient } from '@cognite/sdk';
-import { Color } from 'three';
+import { Color, Matrix4 } from 'three';
 import styled from 'styled-components';
 import { ToolBar, type ToolBarButton } from '@cognite/cogs.js';
 
@@ -46,11 +46,13 @@ export const Main: Story = {
     addModelOptions: {
       modelId: 1791160622840317,
       revisionId: 498427137020189
-    }
+    },
+    transform: new Matrix4().makeTranslation(0, 10, 0)
   },
-  render: ({ addModelOptions }) => (
+  render: ({ addModelOptions, transform }) => (
     <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
       <CadModelContainer addModelOptions={addModelOptions} />
+      <CadModelContainer addModelOptions={addModelOptions} transform={transform} />
       <RevealToolbar />
       <MyCustomToolbar>
         <RevealToolbar.FitModelsButton />

From 0616cb8e3bcc9e4379a5f44389eebad87c05bf63 Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Tue, 18 Jul 2023 14:58:10 +0200
Subject: [PATCH 02/20] Added sliders and adjusted UI for submenu

---
 .../components/RevealToolbar/LayersButton.tsx | 29 ++----
 .../CadModelLayersContainer.tsx               | 96 ++++++++++++++++++
 .../LayersContainer/LayersContainer.tsx       | 70 ++-----------
 .../LayersContainer/OpacitySlider.tsx         | 34 +++++++
 .../PointCloudLayersContainer.tsx             | 97 +++++++++++++++++++
 .../RevealToolbar/LayersContainer/elements.ts | 28 ++++++
 react-components/stories/Toolbar.stories.tsx  |  7 +-
 7 files changed, 281 insertions(+), 80 deletions(-)
 create mode 100644 react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
 create mode 100644 react-components/src/components/RevealToolbar/LayersContainer/OpacitySlider.tsx
 create mode 100644 react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
 create mode 100644 react-components/src/components/RevealToolbar/LayersContainer/elements.ts

diff --git a/react-components/src/components/RevealToolbar/LayersButton.tsx b/react-components/src/components/RevealToolbar/LayersButton.tsx
index 581ada98c89..92b7d426cde 100644
--- a/react-components/src/components/RevealToolbar/LayersButton.tsx
+++ b/react-components/src/components/RevealToolbar/LayersButton.tsx
@@ -2,32 +2,23 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type ReactElement, useCallback, useState } from 'react';
-import { Button } from '@cognite/cogs.js';
+import { type ReactElement, useState } from 'react';
+import { Button, Dropdown } from '@cognite/cogs.js';
 import { LayersContainer } from './LayersContainer/LayersContainer';
-import styled from 'styled-components';
 
 export const LayersButton = (): ReactElement => {
   const [layersEnabled, setLayersEnabled] = useState(false);
-  const showLayers = () => {
+  const showLayers = (): void => {
     setLayersEnabled(!layersEnabled);
   };
 
   return (
-    <LayersButtonContainer>
-      <Button
-        type="ghost"
-        icon="Layers"
-        aria-label="3D Resource layers"
-        onClick={showLayers} />
-        {layersEnabled && <LayersContainer />}
-    </LayersButtonContainer>
+    <Dropdown
+      appendTo={document.body}
+      content={<LayersContainer />}
+      visible={layersEnabled}
+      placement="auto">
+      <Button type="ghost" icon="Layers" aria-label="3D Resource layers" onClick={showLayers} />
+    </Dropdown>
   );
 };
-
-const LayersButtonContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
new file mode 100644
index 00000000000..80ac9fd6a7d
--- /dev/null
+++ b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
@@ -0,0 +1,96 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import React, { type ReactElement, useState } from 'react';
+import { useReveal } from '../../RevealContainer/RevealContext';
+import { type CogniteCadModel } from '@cognite/reveal';
+import { Divider, Menu } from '@cognite/cogs.js';
+import { StyledCheckbox, StyledSubMenu, StyledMenu, StyledSubMenuWrapper } from './elements';
+import { OpacitySlider } from './OpacitySlider';
+
+export const CadModelLayersContainer = (): ReactElement => {
+  const viewer = useReveal();
+  const cadModels = viewer.models.filter((model) => model.type === 'cad');
+
+  const [selectedCadModels, setSelectedCadModels] = useState<
+    Array<{ model: CogniteCadModel; isToggled: boolean }>
+  >(
+    cadModels.map((model) => ({
+      model: model as CogniteCadModel,
+      isToggled: (model as CogniteCadModel).visible
+    }))
+  );
+
+  const [allCadModelVisible, setAllCadModelVisible] = useState(true);
+
+  const handleCadModelVisibility = (model: CogniteCadModel): void => {
+    selectedCadModels.map((data) => {
+      if (data.model === model) {
+        data.isToggled = !data.isToggled;
+      }
+      return data;
+    });
+    model.visible = !model.visible;
+    viewer.requestRedraw();
+    setSelectedCadModels([...selectedCadModels]);
+  };
+
+  const handleAllCadModelsVisibility = (visible: boolean): void => {
+    selectedCadModels.forEach((data) => {
+      data.isToggled = visible;
+      data.model.visible = visible;
+    });
+    viewer.requestRedraw();
+    setAllCadModelVisible(visible);
+    setSelectedCadModels([...selectedCadModels]);
+  };
+
+  const onOpacityChange = (opacity: number): void => {
+    console.log('Point Cloud Opacity: ', opacity);
+  };
+
+  const cadModelContent = (): React.JSX.Element => {
+    return (
+      <StyledSubMenuWrapper label={'Opacity'}>
+        <OpacitySlider onChange={onOpacityChange}/>
+        <Divider />
+        <StyledSubMenu>
+          {selectedCadModels.length > 0 ? (
+            <>
+              {selectedCadModels.map((data) => (
+                <Menu.Item
+                  key={data.model.modelId}
+                  hasCheckbox
+                  checkboxProps={{
+                    checked: data.isToggled,
+                    onChange: (e: { stopPropagation: () => void }) => {
+                      e.stopPropagation();
+                      handleCadModelVisibility(data.model);
+                    }
+                  }}>
+                  {data.model.modelId}
+                </Menu.Item>
+              ))}
+            </>
+          ) : (
+            <Menu.Item>No CAD models</Menu.Item>
+          )}
+        </StyledSubMenu>
+      </StyledSubMenuWrapper>
+    );
+  };
+
+  return (
+    <StyledMenu>
+      <StyledCheckbox
+        checked={allCadModelVisible}
+        onChange={(e, c) => {
+          e.stopPropagation();
+          handleAllCadModelsVisibility(c as boolean);
+        }}
+      />
+      <Menu.Submenu content={cadModelContent()}>CAD models</Menu.Submenu>
+    </StyledMenu>
+  );
+};
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
index 595c515428c..ad9cb98a77b 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
@@ -2,61 +2,20 @@
  * Copyright 2023 Cognite AS
  */
 
-import { useEffect, type ReactElement, useState } from 'react';
+import { type ReactElement } from 'react';
 
-import { useReveal } from '../../RevealContainer/RevealContext';
-import { Checkbox, Flex, Menu } from '@cognite/cogs.js';
+import { Menu } from '@cognite/cogs.js';
 import styled from 'styled-components';
-import { CogniteCadModel } from '@cognite/reveal';
 
-export const LayersContainer = (): ReactElement => {
-  const viewer = useReveal();
-  const cadModels = viewer.models.filter((model) => model.type === 'cad');
-  const pointCloudModels = viewer.models.filter((model) => model.type === 'pointcloud');
-
-  const [cadModelVisible, setCadModelVisible] = useState(true);
-
-  const handleCadModelVisibility = (model: CogniteCadModel) => {
-    model.visible = !model.visible;
-    viewer.requestRedraw();
-  };
-
-  const handleAllCadModelsVisibility = (visible: boolean) => {
-    cadModels.forEach((model) => {
-      (model as CogniteCadModel).visible = visible;
-    });
-    viewer.requestRedraw();
-  };
-
-  const cadModelContent = () => {
-    return (<Menu>
-      {cadModels.length ? (
-        <>
-          {
-            cadModels.map((model) => <Menu.Item
-             key={model.modelId}
-             toggled = {(model as CogniteCadModel).visible}
-             hasCheckbox
-             onClick={() => handleCadModelVisibility(model as CogniteCadModel)}>
-              {model.modelId}
-            </Menu.Item>)
-          }
-        </>
-      )
-      : <Menu.Item>No CAD models</Menu.Item>}
-    </Menu>);
-  };
+import { CadModelLayersContainer } from './CadModelLayersContainer';
+import { PointCloudLayersContainer } from './PointCloudLayersContainer';
 
+export const LayersContainer = (): ReactElement => {
   return (
     <Container>
       <StyleMenu>
-        <StyledCheckbox
-            checked={cadModelVisible}
-            onChange={(_, c) => handleAllCadModelsVisibility(!!c)}
-          />
-          <Menu.Submenu content = {cadModelContent()}>
-            CAD models
-          </Menu.Submenu>
+        <CadModelLayersContainer />
+        <PointCloudLayersContainer />
       </StyleMenu>
     </Container>
   );
@@ -64,21 +23,12 @@ export const LayersContainer = (): ReactElement => {
 
 const Container = styled.div`
   position: absolute;
-  left: calc(100% + 10px);
-  top: calc(0%);
-`;
-
-// const InnerMenuItemContainer = styled(Menu.Item)`
-//   position: absolute;
-//   left: calc(100% + 10px);
-//   top: calc(0%);
-// `;
-
-const StyledCheckbox = styled(Checkbox)`
-  margin-left: 10px;
+  left: calc(0%);
+  top: calc(-70%);
 `;
 
 const StyleMenu = styled(Menu)`
   display: flex;
   flex-direction: column;
+  padding: 0px 0px 0px 0px;
 `;
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/OpacitySlider.tsx b/react-components/src/components/RevealToolbar/LayersContainer/OpacitySlider.tsx
new file mode 100644
index 00000000000..99cfa682b89
--- /dev/null
+++ b/react-components/src/components/RevealToolbar/LayersContainer/OpacitySlider.tsx
@@ -0,0 +1,34 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { useState, type ReactElement } from 'react';
+
+import styled from 'styled-components';
+import { Slider } from '@cognite/cogs.js';
+
+type OpacitySliderProps = {
+  onChange: (value: number) => void;
+};
+
+export function OpacitySlider({ onChange }: OpacitySliderProps): ReactElement {
+  const [sliderValue, setSliderValue] = useState(0);
+  return (
+    <StyledSlider
+      min={0}
+      max={100}
+      step={1}
+      onChange={(v) => {
+        onChange(v);
+        setSliderValue(v);
+      }}
+      value={sliderValue}
+    />
+  );
+}
+
+const StyledSlider = styled(Slider)`
+  position: relative;
+  left: 20px;
+  width: calc(100% - 40px);
+`;
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
new file mode 100644
index 00000000000..2b05c17c134
--- /dev/null
+++ b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
@@ -0,0 +1,97 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import React, { type ReactElement, useState } from 'react';
+
+import { useReveal } from '../../RevealContainer/RevealContext';
+import { Divider, Menu } from '@cognite/cogs.js';
+import { StyledCheckbox, StyledSubMenu, StyledMenu, StyledSubMenuWrapper } from './elements';
+import { type CognitePointCloudModel } from '@cognite/reveal';
+import { OpacitySlider } from './OpacitySlider';
+
+export const PointCloudLayersContainer = (): ReactElement => {
+  const viewer = useReveal();
+  const pointCloudModels = viewer.models.filter((model) => model.type === 'pointcloud');
+
+  const [selectedPointCloudModels, setSelectedPointCloudModels] = useState<
+    Array<{ model: CognitePointCloudModel; isToggled: boolean }>
+  >(
+    pointCloudModels.map((model) => ({
+      model: model as CognitePointCloudModel,
+      isToggled: (model as CognitePointCloudModel).getDefaultPointCloudAppearance().visible ?? true
+    }))
+  );
+
+  const [allPointCloudModelVisible, setAllPointCloudModelVisible] = useState(true);
+
+  const handlePointCloudVisibility = (model: CognitePointCloudModel): void => {
+    selectedPointCloudModels.map((data) => {
+      if (data.model === model) {
+        data.isToggled = !data.isToggled;
+        model.setDefaultPointCloudAppearance({ visible: data.isToggled });
+      }
+      return data;
+    });
+    viewer.requestRedraw();
+    setSelectedPointCloudModels([...selectedPointCloudModels]);
+  };
+
+  const handleAllPointCloudModelsVisibility = (visible: boolean): void => {
+    selectedPointCloudModels.forEach((data) => {
+      data.isToggled = visible;
+      data.model.setDefaultPointCloudAppearance({ visible });
+    });
+    viewer.requestRedraw();
+    setAllPointCloudModelVisible(visible);
+    setSelectedPointCloudModels([...selectedPointCloudModels]);
+  };
+
+  const onOpacityChange = (opacity: number): void => {
+    console.log('Point Cloud Opacity: ', opacity);
+  };
+
+  const pointCloudModelContent = (): React.JSX.Element => {
+    return (
+      <StyledSubMenuWrapper label={'Opacity'}>
+        <OpacitySlider onChange={onOpacityChange} />
+        <Divider />
+        <StyledSubMenu>
+          {selectedPointCloudModels.length > 0 ? (
+            <>
+              {selectedPointCloudModels.map((data) => (
+                <Menu.Item
+                  key={data.model.modelId}
+                  hasCheckbox
+                  checkboxProps={{
+                    checked: data.isToggled,
+                    onChange: (e: { stopPropagation: () => void }) => {
+                      e.stopPropagation();
+                      handlePointCloudVisibility(data.model);
+                    }
+                  }}>
+                  {data.model.modelId}
+                </Menu.Item>
+              ))}
+            </>
+          ) : (
+            <Menu.Item>No Point Cloud</Menu.Item>
+          )}
+        </StyledSubMenu>
+      </StyledSubMenuWrapper>
+    );
+  };
+
+  return (
+    <StyledMenu>
+      <StyledCheckbox
+        checked={allPointCloudModelVisible}
+        onChange={(e, c) => {
+          e.stopPropagation();
+          handleAllPointCloudModelsVisibility(c as boolean);
+        }}
+      />
+      <Menu.Submenu content={pointCloudModelContent()}>Point clouds</Menu.Submenu>
+    </StyledMenu>
+  );
+};
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/elements.ts b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
new file mode 100644
index 00000000000..3ee6e135aa8
--- /dev/null
+++ b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
@@ -0,0 +1,28 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { Checkbox, Menu } from '@cognite/cogs.js';
+import styled from 'styled-components';
+
+export const StyledCheckbox = styled(Checkbox)`
+  margin-left: 10px;
+`;
+
+export const StyledMenu = styled(Menu)`
+  display: flex;
+  flex-direction: row;
+  box-shadow: none;
+  padding: 0px;
+`;
+
+export const StyledSubMenu = styled(Menu)`
+  box-shadow: none;
+  padding: 8px;
+`;
+
+export const StyledSubMenuWrapper = styled(Menu.Section)`
+  background-color: #ffffff;
+  border-radius: 8px;
+  overflow: auto;
+`;
diff --git a/react-components/stories/Toolbar.stories.tsx b/react-components/stories/Toolbar.stories.tsx
index 685fab784a7..cf07264dd1f 100644
--- a/react-components/stories/Toolbar.stories.tsx
+++ b/react-components/stories/Toolbar.stories.tsx
@@ -3,7 +3,7 @@
  */
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { CadModelContainer, RevealContainer, RevealToolbar } from '../src';
+import { CadModelContainer, PointCloudContainer, RevealContainer, RevealToolbar } from '../src';
 import { CogniteClient } from '@cognite/sdk';
 import { Color, Matrix4 } from 'three';
 import styled from 'styled-components';
@@ -53,6 +53,11 @@ export const Main: Story = {
     <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
       <CadModelContainer addModelOptions={addModelOptions} />
       <CadModelContainer addModelOptions={addModelOptions} transform={transform} />
+      <PointCloudContainer addModelOptions={{
+          modelId: 3865289545346058,
+          revisionId: 4160448151596909
+        }} transform={new Matrix4()}
+      />
       <RevealToolbar />
       <MyCustomToolbar>
         <RevealToolbar.FitModelsButton />

From c088b5c748266ed44db8cf9c072da7310908dd3c Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Tue, 18 Jul 2023 15:06:43 +0200
Subject: [PATCH 03/20] Fixed lint error

---
 .../LayersContainer/CadModelLayersContainer.tsx             | 2 +-
 react-components/stories/Toolbar.stories.tsx                | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
index 80ac9fd6a7d..e7c8a6eba58 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
@@ -53,7 +53,7 @@ export const CadModelLayersContainer = (): ReactElement => {
   const cadModelContent = (): React.JSX.Element => {
     return (
       <StyledSubMenuWrapper label={'Opacity'}>
-        <OpacitySlider onChange={onOpacityChange}/>
+        <OpacitySlider onChange={onOpacityChange} />
         <Divider />
         <StyledSubMenu>
           {selectedCadModels.length > 0 ? (
diff --git a/react-components/stories/Toolbar.stories.tsx b/react-components/stories/Toolbar.stories.tsx
index cf07264dd1f..3848dcf1366 100644
--- a/react-components/stories/Toolbar.stories.tsx
+++ b/react-components/stories/Toolbar.stories.tsx
@@ -53,10 +53,12 @@ export const Main: Story = {
     <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
       <CadModelContainer addModelOptions={addModelOptions} />
       <CadModelContainer addModelOptions={addModelOptions} transform={transform} />
-      <PointCloudContainer addModelOptions={{
+      <PointCloudContainer
+        addModelOptions={{
           modelId: 3865289545346058,
           revisionId: 4160448151596909
-        }} transform={new Matrix4()}
+        }}
+        transform={new Matrix4()}
       />
       <RevealToolbar />
       <MyCustomToolbar>

From 4678f7a8c710908d13a15ba18a17698e9d5dafa4 Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Wed, 19 Jul 2023 10:44:01 +0200
Subject: [PATCH 04/20] fixed 360 image visibility issue

---
 .../Image360LayersContainer.tsx               | 96 +++++++++++++++++++
 .../LayersContainer/LayersContainer.tsx       |  2 +
 .../stories/LayersContainer.stories.tsx       | 56 +++++++++++
 react-components/stories/Toolbar.stories.tsx  | 17 +---
 4 files changed, 158 insertions(+), 13 deletions(-)
 create mode 100644 react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
 create mode 100644 react-components/stories/LayersContainer.stories.tsx

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
new file mode 100644
index 00000000000..a531ea5f732
--- /dev/null
+++ b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
@@ -0,0 +1,96 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import React, { type ReactElement, useState } from 'react';
+import { useReveal } from '../../RevealContainer/RevealContext';
+import { Divider, Menu } from '@cognite/cogs.js';
+import { StyledCheckbox, StyledSubMenu, StyledMenu, StyledSubMenuWrapper } from './elements';
+import { type Image360Collection } from '@cognite/reveal';
+import { OpacitySlider } from './OpacitySlider';
+
+export const Image360CollectionLayerContainer = (): ReactElement => {
+  const viewer = useReveal();
+  const image360Collection = viewer.get360ImageCollections();
+
+  const [selectedImage360Collection, setSelectedImage360Collection] = useState<
+    Array<{ image360: Image360Collection; isToggled: boolean }>
+  >(
+    image360Collection.map((image360Collection) => ({
+      image360: image360Collection,
+      isToggled: true
+    }))
+  );
+
+  const [all360ImagesVisible, setAll360ImagesVisible] = useState(true);
+
+  const handle360ImagesVisibility = (image360: Image360Collection): void => {
+    selectedImage360Collection.map((data) => {
+      if (data.image360 === image360) {
+        data.isToggled = !data.isToggled;
+        image360.setIconsVisibility(data.isToggled);
+      }
+      return data;
+    });
+    viewer.requestRedraw();
+    setSelectedImage360Collection([...selectedImage360Collection]);
+  };
+
+  const handleAll360ImagesVisibility = (visible: boolean): void => {
+    selectedImage360Collection.forEach((data) => {
+      data.isToggled = visible;
+      data.image360.setIconsVisibility(data.isToggled);
+    });
+    viewer.requestRedraw();
+    setAll360ImagesVisible(visible);
+    setSelectedImage360Collection([...selectedImage360Collection]);
+  };
+
+  const onOpacityChange = (opacity: number): void => {
+    console.log('360 Images Opacity: ', opacity);
+  };
+
+  const image360Content = (): React.JSX.Element => {
+    return (
+      <StyledSubMenuWrapper label={'Opacity'}>
+        <OpacitySlider onChange={onOpacityChange} />
+        <Divider />
+        <StyledSubMenu>
+          {selectedImage360Collection.length > 0 ? (
+            <>
+              {selectedImage360Collection.map((data) => (
+                <Menu.Item
+                  key={data.image360.id}
+                  hasCheckbox
+                  checkboxProps={{
+                    checked: data.isToggled,
+                    onChange: (e: { stopPropagation: () => void }) => {
+                      e.stopPropagation();
+                      handle360ImagesVisibility(data.image360);
+                    }
+                  }}>
+                  {data.image360.label}
+                </Menu.Item>
+              ))}
+            </>
+          ) : (
+            <Menu.Item>No 360 images</Menu.Item>
+          )}
+        </StyledSubMenu>
+      </StyledSubMenuWrapper>
+    );
+  };
+
+  return (
+    <StyledMenu>
+      <StyledCheckbox
+        checked={all360ImagesVisible}
+        onChange={(e, c) => {
+          e.stopPropagation();
+          handleAll360ImagesVisibility(c as boolean);
+        }}
+      />
+      <Menu.Submenu content={image360Content()}>360 images</Menu.Submenu>
+    </StyledMenu>
+  );
+};
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
index ad9cb98a77b..ce1e4c25440 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
@@ -9,6 +9,7 @@ import styled from 'styled-components';
 
 import { CadModelLayersContainer } from './CadModelLayersContainer';
 import { PointCloudLayersContainer } from './PointCloudLayersContainer';
+import { Image360CollectionLayerContainer } from './Image360LayersContainer';
 
 export const LayersContainer = (): ReactElement => {
   return (
@@ -16,6 +17,7 @@ export const LayersContainer = (): ReactElement => {
       <StyleMenu>
         <CadModelLayersContainer />
         <PointCloudLayersContainer />
+        <Image360CollectionLayerContainer />
       </StyleMenu>
     </Container>
   );
diff --git a/react-components/stories/LayersContainer.stories.tsx b/react-components/stories/LayersContainer.stories.tsx
new file mode 100644
index 00000000000..4c881f1fb4f
--- /dev/null
+++ b/react-components/stories/LayersContainer.stories.tsx
@@ -0,0 +1,56 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  CadModelContainer,
+  Image360CollectionContainer,
+  PointCloudContainer,
+  RevealContainer,
+  RevealToolbar
+} from '../src';
+import { CogniteClient } from '@cognite/sdk';
+import { Color, Matrix4 } from 'three';
+
+const meta = {
+  title: 'Example/Toolbar/LayersContainer',
+  component: CadModelContainer,
+  tags: ['autodocs']
+} satisfies Meta<typeof CadModelContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const token = new URLSearchParams(window.location.search).get('token') ?? '';
+const sdk = new CogniteClient({
+  appId: 'reveal.example',
+  baseUrl: 'https://greenfield.cognitedata.com',
+  project: '3d-test',
+  getToken: async () => await Promise.resolve(token)
+});
+
+export const Main: Story = {
+  args: {
+    addModelOptions: {
+      modelId: 1791160622840317,
+      revisionId: 498427137020189
+    },
+    transform: new Matrix4().makeTranslation(0, 10, 0)
+  },
+  render: ({ addModelOptions, transform }) => (
+    <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
+      <CadModelContainer addModelOptions={addModelOptions} />
+      <CadModelContainer addModelOptions={addModelOptions} transform={transform} />
+      <PointCloudContainer
+        addModelOptions={{
+          modelId: 3865289545346058,
+          revisionId: 4160448151596909
+        }}
+        transform={new Matrix4()}
+      />
+      <Image360CollectionContainer siteId={'Hibernia_RS2'} />
+      <RevealToolbar />
+    </RevealContainer>
+  )
+};
diff --git a/react-components/stories/Toolbar.stories.tsx b/react-components/stories/Toolbar.stories.tsx
index 3848dcf1366..635f659dda1 100644
--- a/react-components/stories/Toolbar.stories.tsx
+++ b/react-components/stories/Toolbar.stories.tsx
@@ -3,9 +3,9 @@
  */
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { CadModelContainer, PointCloudContainer, RevealContainer, RevealToolbar } from '../src';
+import { CadModelContainer, RevealContainer, RevealToolbar } from '../src';
 import { CogniteClient } from '@cognite/sdk';
-import { Color, Matrix4 } from 'three';
+import { Color } from 'three';
 import styled from 'styled-components';
 import { ToolBar, type ToolBarButton } from '@cognite/cogs.js';
 
@@ -46,20 +46,11 @@ export const Main: Story = {
     addModelOptions: {
       modelId: 1791160622840317,
       revisionId: 498427137020189
-    },
-    transform: new Matrix4().makeTranslation(0, 10, 0)
+    }
   },
-  render: ({ addModelOptions, transform }) => (
+  render: ({ addModelOptions }) => (
     <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
       <CadModelContainer addModelOptions={addModelOptions} />
-      <CadModelContainer addModelOptions={addModelOptions} transform={transform} />
-      <PointCloudContainer
-        addModelOptions={{
-          modelId: 3865289545346058,
-          revisionId: 4160448151596909
-        }}
-        transform={new Matrix4()}
-      />
       <RevealToolbar />
       <MyCustomToolbar>
         <RevealToolbar.FitModelsButton />

From dfb89a4a925f13836d61ec8408db273f1f0bd087 Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Wed, 19 Jul 2023 11:12:03 +0200
Subject: [PATCH 05/20] Improved UI when one of the 3D resources is not
 available

---
 .../CadModelLayersContainer.tsx               | 60 +++++++++---------
 .../Image360LayersContainer.tsx               | 62 ++++++++++---------
 .../PointCloudLayersContainer.tsx             | 60 +++++++++---------
 3 files changed, 92 insertions(+), 90 deletions(-)

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
index e7c8a6eba58..895be603784 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
@@ -56,41 +56,41 @@ export const CadModelLayersContainer = (): ReactElement => {
         <OpacitySlider onChange={onOpacityChange} />
         <Divider />
         <StyledSubMenu>
-          {selectedCadModels.length > 0 ? (
-            <>
-              {selectedCadModels.map((data) => (
-                <Menu.Item
-                  key={data.model.modelId}
-                  hasCheckbox
-                  checkboxProps={{
-                    checked: data.isToggled,
-                    onChange: (e: { stopPropagation: () => void }) => {
-                      e.stopPropagation();
-                      handleCadModelVisibility(data.model);
-                    }
-                  }}>
-                  {data.model.modelId}
-                </Menu.Item>
-              ))}
-            </>
-          ) : (
-            <Menu.Item>No CAD models</Menu.Item>
-          )}
+          {selectedCadModels.map((data) => (
+            <Menu.Item
+              key={data.model.modelId}
+              hasCheckbox
+              checkboxProps={{
+                checked: data.isToggled,
+                onChange: (e: { stopPropagation: () => void }) => {
+                  e.stopPropagation();
+                  handleCadModelVisibility(data.model);
+                }
+              }}>
+              {data.model.modelId}
+            </Menu.Item>
+          ))}
         </StyledSubMenu>
       </StyledSubMenuWrapper>
     );
   };
 
   return (
-    <StyledMenu>
-      <StyledCheckbox
-        checked={allCadModelVisible}
-        onChange={(e, c) => {
-          e.stopPropagation();
-          handleAllCadModelsVisibility(c as boolean);
-        }}
-      />
-      <Menu.Submenu content={cadModelContent()}>CAD models</Menu.Submenu>
-    </StyledMenu>
+    <>
+      {selectedCadModels.length > 0 ? (
+        <StyledMenu>
+          <StyledCheckbox
+            checked={allCadModelVisible}
+            onChange={(e, c) => {
+              e.stopPropagation();
+              handleAllCadModelsVisibility(c as boolean);
+            }}
+          />
+          <Menu.Submenu content={cadModelContent()}>CAD models</Menu.Submenu>
+        </StyledMenu>
+      ) : (
+        <>No CAD models</>
+      )}
+    </>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
index a531ea5f732..a87bb1c5f79 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
@@ -56,41 +56,43 @@ export const Image360CollectionLayerContainer = (): ReactElement => {
         <OpacitySlider onChange={onOpacityChange} />
         <Divider />
         <StyledSubMenu>
-          {selectedImage360Collection.length > 0 ? (
-            <>
-              {selectedImage360Collection.map((data) => (
-                <Menu.Item
-                  key={data.image360.id}
-                  hasCheckbox
-                  checkboxProps={{
-                    checked: data.isToggled,
-                    onChange: (e: { stopPropagation: () => void }) => {
-                      e.stopPropagation();
-                      handle360ImagesVisibility(data.image360);
-                    }
-                  }}>
-                  {data.image360.label}
-                </Menu.Item>
-              ))}
-            </>
-          ) : (
-            <Menu.Item>No 360 images</Menu.Item>
-          )}
+          <>
+            {selectedImage360Collection.map((data) => (
+              <Menu.Item
+                key={data.image360.id}
+                hasCheckbox
+                checkboxProps={{
+                  checked: data.isToggled,
+                  onChange: (e: { stopPropagation: () => void }) => {
+                    e.stopPropagation();
+                    handle360ImagesVisibility(data.image360);
+                  }
+                }}>
+                {data.image360.label}
+              </Menu.Item>
+            ))}
+          </>
         </StyledSubMenu>
       </StyledSubMenuWrapper>
     );
   };
 
   return (
-    <StyledMenu>
-      <StyledCheckbox
-        checked={all360ImagesVisible}
-        onChange={(e, c) => {
-          e.stopPropagation();
-          handleAll360ImagesVisibility(c as boolean);
-        }}
-      />
-      <Menu.Submenu content={image360Content()}>360 images</Menu.Submenu>
-    </StyledMenu>
+    <>
+      {selectedImage360Collection.length > 0 ? (
+        <StyledMenu>
+          <StyledCheckbox
+            checked={all360ImagesVisible}
+            onChange={(e, c) => {
+              e.stopPropagation();
+              handleAll360ImagesVisibility(c as boolean);
+            }}
+          />
+          <Menu.Submenu content={image360Content()}>360 images</Menu.Submenu>
+        </StyledMenu>
+      ) : (
+        <></>
+      )}
+    </>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
index 2b05c17c134..2e243e4fb1e 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
@@ -57,41 +57,41 @@ export const PointCloudLayersContainer = (): ReactElement => {
         <OpacitySlider onChange={onOpacityChange} />
         <Divider />
         <StyledSubMenu>
-          {selectedPointCloudModels.length > 0 ? (
-            <>
-              {selectedPointCloudModels.map((data) => (
-                <Menu.Item
-                  key={data.model.modelId}
-                  hasCheckbox
-                  checkboxProps={{
-                    checked: data.isToggled,
-                    onChange: (e: { stopPropagation: () => void }) => {
-                      e.stopPropagation();
-                      handlePointCloudVisibility(data.model);
-                    }
-                  }}>
-                  {data.model.modelId}
-                </Menu.Item>
-              ))}
-            </>
-          ) : (
-            <Menu.Item>No Point Cloud</Menu.Item>
-          )}
+          {selectedPointCloudModels.map((data) => (
+            <Menu.Item
+              key={data.model.modelId}
+              hasCheckbox
+              checkboxProps={{
+                checked: data.isToggled,
+                onChange: (e: { stopPropagation: () => void }) => {
+                  e.stopPropagation();
+                  handlePointCloudVisibility(data.model);
+                }
+              }}>
+              {data.model.modelId}
+            </Menu.Item>
+          ))}
         </StyledSubMenu>
       </StyledSubMenuWrapper>
     );
   };
 
   return (
-    <StyledMenu>
-      <StyledCheckbox
-        checked={allPointCloudModelVisible}
-        onChange={(e, c) => {
-          e.stopPropagation();
-          handleAllPointCloudModelsVisibility(c as boolean);
-        }}
-      />
-      <Menu.Submenu content={pointCloudModelContent()}>Point clouds</Menu.Submenu>
-    </StyledMenu>
+    <>
+      {selectedPointCloudModels.length > 0 ? (
+        <StyledMenu>
+          <StyledCheckbox
+            checked={allPointCloudModelVisible}
+            onChange={(e, c) => {
+              e.stopPropagation();
+              handleAllPointCloudModelsVisibility(c as boolean);
+            }}
+          />
+          <Menu.Submenu content={pointCloudModelContent()}>Point clouds</Menu.Submenu>
+        </StyledMenu>
+      ) : (
+        <></>
+      )}
+    </>
   );
 };

From 4131913cb4e2d1797529d54810f0db70eac9c82d Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Wed, 19 Jul 2023 11:47:53 +0200
Subject: [PATCH 06/20] removed opacity from 3D resources layers option

---
 .../CadModelLayersContainer.tsx               | 45 +++++++----------
 .../Image360LayersContainer.tsx               | 49 ++++++++-----------
 .../LayersContainer/OpacitySlider.tsx         | 34 -------------
 .../PointCloudLayersContainer.tsx             | 45 +++++++----------
 .../RevealToolbar/LayersContainer/elements.ts |  6 ---
 5 files changed, 56 insertions(+), 123 deletions(-)
 delete mode 100644 react-components/src/components/RevealToolbar/LayersContainer/OpacitySlider.tsx

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
index 895be603784..2aece3b1f4c 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
@@ -5,9 +5,8 @@
 import React, { type ReactElement, useState } from 'react';
 import { useReveal } from '../../RevealContainer/RevealContext';
 import { type CogniteCadModel } from '@cognite/reveal';
-import { Divider, Menu } from '@cognite/cogs.js';
-import { StyledCheckbox, StyledSubMenu, StyledMenu, StyledSubMenuWrapper } from './elements';
-import { OpacitySlider } from './OpacitySlider';
+import { Menu } from '@cognite/cogs.js';
+import { StyledCheckbox, StyledSubMenu, StyledMenu } from './elements';
 
 export const CadModelLayersContainer = (): ReactElement => {
   const viewer = useReveal();
@@ -46,32 +45,24 @@ export const CadModelLayersContainer = (): ReactElement => {
     setSelectedCadModels([...selectedCadModels]);
   };
 
-  const onOpacityChange = (opacity: number): void => {
-    console.log('Point Cloud Opacity: ', opacity);
-  };
-
   const cadModelContent = (): React.JSX.Element => {
     return (
-      <StyledSubMenuWrapper label={'Opacity'}>
-        <OpacitySlider onChange={onOpacityChange} />
-        <Divider />
-        <StyledSubMenu>
-          {selectedCadModels.map((data) => (
-            <Menu.Item
-              key={data.model.modelId}
-              hasCheckbox
-              checkboxProps={{
-                checked: data.isToggled,
-                onChange: (e: { stopPropagation: () => void }) => {
-                  e.stopPropagation();
-                  handleCadModelVisibility(data.model);
-                }
-              }}>
-              {data.model.modelId}
-            </Menu.Item>
-          ))}
-        </StyledSubMenu>
-      </StyledSubMenuWrapper>
+      <StyledSubMenu>
+        {selectedCadModels.map((data) => (
+          <Menu.Item
+            key={data.model.modelId}
+            hasCheckbox
+            checkboxProps={{
+              checked: data.isToggled,
+              onChange: (e: { stopPropagation: () => void }) => {
+                e.stopPropagation();
+                handleCadModelVisibility(data.model);
+              }
+            }}>
+            {data.model.modelId}
+          </Menu.Item>
+        ))}
+      </StyledSubMenu>
     );
   };
 
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
index a87bb1c5f79..39e91d6a8dc 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
@@ -4,10 +4,9 @@
 
 import React, { type ReactElement, useState } from 'react';
 import { useReveal } from '../../RevealContainer/RevealContext';
-import { Divider, Menu } from '@cognite/cogs.js';
-import { StyledCheckbox, StyledSubMenu, StyledMenu, StyledSubMenuWrapper } from './elements';
+import { Menu } from '@cognite/cogs.js';
+import { StyledCheckbox, StyledSubMenu, StyledMenu } from './elements';
 import { type Image360Collection } from '@cognite/reveal';
-import { OpacitySlider } from './OpacitySlider';
 
 export const Image360CollectionLayerContainer = (): ReactElement => {
   const viewer = useReveal();
@@ -46,34 +45,26 @@ export const Image360CollectionLayerContainer = (): ReactElement => {
     setSelectedImage360Collection([...selectedImage360Collection]);
   };
 
-  const onOpacityChange = (opacity: number): void => {
-    console.log('360 Images Opacity: ', opacity);
-  };
-
   const image360Content = (): React.JSX.Element => {
     return (
-      <StyledSubMenuWrapper label={'Opacity'}>
-        <OpacitySlider onChange={onOpacityChange} />
-        <Divider />
-        <StyledSubMenu>
-          <>
-            {selectedImage360Collection.map((data) => (
-              <Menu.Item
-                key={data.image360.id}
-                hasCheckbox
-                checkboxProps={{
-                  checked: data.isToggled,
-                  onChange: (e: { stopPropagation: () => void }) => {
-                    e.stopPropagation();
-                    handle360ImagesVisibility(data.image360);
-                  }
-                }}>
-                {data.image360.label}
-              </Menu.Item>
-            ))}
-          </>
-        </StyledSubMenu>
-      </StyledSubMenuWrapper>
+      <StyledSubMenu>
+        <>
+          {selectedImage360Collection.map((data) => (
+            <Menu.Item
+              key={data.image360.id}
+              hasCheckbox
+              checkboxProps={{
+                checked: data.isToggled,
+                onChange: (e: { stopPropagation: () => void }) => {
+                  e.stopPropagation();
+                  handle360ImagesVisibility(data.image360);
+                }
+              }}>
+              {data.image360.label}
+            </Menu.Item>
+          ))}
+        </>
+      </StyledSubMenu>
     );
   };
 
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/OpacitySlider.tsx b/react-components/src/components/RevealToolbar/LayersContainer/OpacitySlider.tsx
deleted file mode 100644
index 99cfa682b89..00000000000
--- a/react-components/src/components/RevealToolbar/LayersContainer/OpacitySlider.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*!
- * Copyright 2023 Cognite AS
- */
-
-import { useState, type ReactElement } from 'react';
-
-import styled from 'styled-components';
-import { Slider } from '@cognite/cogs.js';
-
-type OpacitySliderProps = {
-  onChange: (value: number) => void;
-};
-
-export function OpacitySlider({ onChange }: OpacitySliderProps): ReactElement {
-  const [sliderValue, setSliderValue] = useState(0);
-  return (
-    <StyledSlider
-      min={0}
-      max={100}
-      step={1}
-      onChange={(v) => {
-        onChange(v);
-        setSliderValue(v);
-      }}
-      value={sliderValue}
-    />
-  );
-}
-
-const StyledSlider = styled(Slider)`
-  position: relative;
-  left: 20px;
-  width: calc(100% - 40px);
-`;
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
index 2e243e4fb1e..34ce03f2c4b 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
@@ -5,10 +5,9 @@
 import React, { type ReactElement, useState } from 'react';
 
 import { useReveal } from '../../RevealContainer/RevealContext';
-import { Divider, Menu } from '@cognite/cogs.js';
-import { StyledCheckbox, StyledSubMenu, StyledMenu, StyledSubMenuWrapper } from './elements';
+import { Menu } from '@cognite/cogs.js';
+import { StyledCheckbox, StyledSubMenu, StyledMenu } from './elements';
 import { type CognitePointCloudModel } from '@cognite/reveal';
-import { OpacitySlider } from './OpacitySlider';
 
 export const PointCloudLayersContainer = (): ReactElement => {
   const viewer = useReveal();
@@ -47,32 +46,24 @@ export const PointCloudLayersContainer = (): ReactElement => {
     setSelectedPointCloudModels([...selectedPointCloudModels]);
   };
 
-  const onOpacityChange = (opacity: number): void => {
-    console.log('Point Cloud Opacity: ', opacity);
-  };
-
   const pointCloudModelContent = (): React.JSX.Element => {
     return (
-      <StyledSubMenuWrapper label={'Opacity'}>
-        <OpacitySlider onChange={onOpacityChange} />
-        <Divider />
-        <StyledSubMenu>
-          {selectedPointCloudModels.map((data) => (
-            <Menu.Item
-              key={data.model.modelId}
-              hasCheckbox
-              checkboxProps={{
-                checked: data.isToggled,
-                onChange: (e: { stopPropagation: () => void }) => {
-                  e.stopPropagation();
-                  handlePointCloudVisibility(data.model);
-                }
-              }}>
-              {data.model.modelId}
-            </Menu.Item>
-          ))}
-        </StyledSubMenu>
-      </StyledSubMenuWrapper>
+      <StyledSubMenu>
+        {selectedPointCloudModels.map((data) => (
+          <Menu.Item
+            key={data.model.modelId}
+            hasCheckbox
+            checkboxProps={{
+              checked: data.isToggled,
+              onChange: (e: { stopPropagation: () => void }) => {
+                e.stopPropagation();
+                handlePointCloudVisibility(data.model);
+              }
+            }}>
+            {data.model.modelId}
+          </Menu.Item>
+        ))}
+      </StyledSubMenu>
     );
   };
 
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/elements.ts b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
index 3ee6e135aa8..acfc09f5d74 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
+++ b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
@@ -20,9 +20,3 @@ export const StyledSubMenu = styled(Menu)`
   box-shadow: none;
   padding: 8px;
 `;
-
-export const StyledSubMenuWrapper = styled(Menu.Section)`
-  background-color: #ffffff;
-  border-radius: 8px;
-  overflow: auto;
-`;

From 1265edde87b93e09881bddddda0c07a66087a649 Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Wed, 19 Jul 2023 11:56:08 +0200
Subject: [PATCH 07/20] removed additional elements which was not needed

---
 .../CadModelLayersContainer.tsx               |  2 +-
 .../Image360LayersContainer.tsx               | 30 +++++++++----------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
index 2aece3b1f4c..dbce144544a 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
@@ -80,7 +80,7 @@ export const CadModelLayersContainer = (): ReactElement => {
           <Menu.Submenu content={cadModelContent()}>CAD models</Menu.Submenu>
         </StyledMenu>
       ) : (
-        <>No CAD models</>
+        <></>
       )}
     </>
   );
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
index 39e91d6a8dc..b023976cee4 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
@@ -48,22 +48,20 @@ export const Image360CollectionLayerContainer = (): ReactElement => {
   const image360Content = (): React.JSX.Element => {
     return (
       <StyledSubMenu>
-        <>
-          {selectedImage360Collection.map((data) => (
-            <Menu.Item
-              key={data.image360.id}
-              hasCheckbox
-              checkboxProps={{
-                checked: data.isToggled,
-                onChange: (e: { stopPropagation: () => void }) => {
-                  e.stopPropagation();
-                  handle360ImagesVisibility(data.image360);
-                }
-              }}>
-              {data.image360.label}
-            </Menu.Item>
-          ))}
-        </>
+        {selectedImage360Collection.map((data) => (
+          <Menu.Item
+            key={data.image360.id}
+            hasCheckbox
+            checkboxProps={{
+              checked: data.isToggled,
+              onChange: (e: { stopPropagation: () => void }) => {
+                e.stopPropagation();
+                handle360ImagesVisibility(data.image360);
+              }
+            }}>
+            {data.image360.label}
+          </Menu.Item>
+        ))}
       </StyledSubMenu>
     );
   };

From 162de702c6a1eaf1dab0f253db4bab9b5f714204 Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Thu, 20 Jul 2023 11:11:10 +0200
Subject: [PATCH 08/20] added indeterminate option for checkbox and exposed
 LayerButton

---
 .../LayersContainer/CadModelLayersContainer.tsx              | 5 +++++
 .../LayersContainer/Image360LayersContainer.tsx              | 5 +++++
 .../LayersContainer/PointCloudLayersContainer.tsx            | 4 ++++
 react-components/src/index.ts                                | 1 +
 4 files changed, 15 insertions(+)

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
index dbce144544a..a87606f2ee1 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
@@ -22,6 +22,7 @@ export const CadModelLayersContainer = (): ReactElement => {
   );
 
   const [allCadModelVisible, setAllCadModelVisible] = useState(true);
+  const [indeterminate, setIndeterminate] = useState<boolean>(false);
 
   const handleCadModelVisibility = (model: CogniteCadModel): void => {
     selectedCadModels.map((data) => {
@@ -33,6 +34,8 @@ export const CadModelLayersContainer = (): ReactElement => {
     model.visible = !model.visible;
     viewer.requestRedraw();
     setSelectedCadModels([...selectedCadModels]);
+    setIndeterminate(selectedCadModels.some((data) => !data.isToggled));
+    setAllCadModelVisible(!selectedCadModels.every((data) => !data.isToggled));
   };
 
   const handleAllCadModelsVisibility = (visible: boolean): void => {
@@ -42,6 +45,7 @@ export const CadModelLayersContainer = (): ReactElement => {
     });
     viewer.requestRedraw();
     setAllCadModelVisible(visible);
+    setIndeterminate(false);
     setSelectedCadModels([...selectedCadModels]);
   };
 
@@ -72,6 +76,7 @@ export const CadModelLayersContainer = (): ReactElement => {
         <StyledMenu>
           <StyledCheckbox
             checked={allCadModelVisible}
+            indeterminate={indeterminate}
             onChange={(e, c) => {
               e.stopPropagation();
               handleAllCadModelsVisibility(c as boolean);
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
index b023976cee4..0cab03ea466 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
@@ -22,6 +22,7 @@ export const Image360CollectionLayerContainer = (): ReactElement => {
   );
 
   const [all360ImagesVisible, setAll360ImagesVisible] = useState(true);
+  const [indeterminate, setIndeterminate] = useState<boolean>(false);
 
   const handle360ImagesVisibility = (image360: Image360Collection): void => {
     selectedImage360Collection.map((data) => {
@@ -33,6 +34,8 @@ export const Image360CollectionLayerContainer = (): ReactElement => {
     });
     viewer.requestRedraw();
     setSelectedImage360Collection([...selectedImage360Collection]);
+    setIndeterminate(selectedImage360Collection.some((data) => !data.isToggled));
+    setAll360ImagesVisible(!selectedImage360Collection.every((data) => !data.isToggled));
   };
 
   const handleAll360ImagesVisibility = (visible: boolean): void => {
@@ -42,6 +45,7 @@ export const Image360CollectionLayerContainer = (): ReactElement => {
     });
     viewer.requestRedraw();
     setAll360ImagesVisible(visible);
+    setIndeterminate(false);
     setSelectedImage360Collection([...selectedImage360Collection]);
   };
 
@@ -72,6 +76,7 @@ export const Image360CollectionLayerContainer = (): ReactElement => {
         <StyledMenu>
           <StyledCheckbox
             checked={all360ImagesVisible}
+            indeterminate={indeterminate}
             onChange={(e, c) => {
               e.stopPropagation();
               handleAll360ImagesVisibility(c as boolean);
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
index 34ce03f2c4b..72630f8fd26 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
@@ -23,6 +23,7 @@ export const PointCloudLayersContainer = (): ReactElement => {
   );
 
   const [allPointCloudModelVisible, setAllPointCloudModelVisible] = useState(true);
+  const [indeterminate, setIndeterminate] = useState<boolean>(false);
 
   const handlePointCloudVisibility = (model: CognitePointCloudModel): void => {
     selectedPointCloudModels.map((data) => {
@@ -34,6 +35,8 @@ export const PointCloudLayersContainer = (): ReactElement => {
     });
     viewer.requestRedraw();
     setSelectedPointCloudModels([...selectedPointCloudModels]);
+    setIndeterminate(selectedPointCloudModels.some((data) => !data.isToggled));
+    setAllPointCloudModelVisible(!selectedPointCloudModels.every((data) => !data.isToggled));
   };
 
   const handleAllPointCloudModelsVisibility = (visible: boolean): void => {
@@ -73,6 +76,7 @@ export const PointCloudLayersContainer = (): ReactElement => {
         <StyledMenu>
           <StyledCheckbox
             checked={allPointCloudModelVisible}
+            indeterminate={indeterminate}
             onChange={(e, c) => {
               e.stopPropagation();
               handleAllPointCloudModelsVisibility(c as boolean);
diff --git a/react-components/src/index.ts b/react-components/src/index.ts
index 855a901fa2a..5cc01386038 100644
--- a/react-components/src/index.ts
+++ b/react-components/src/index.ts
@@ -29,5 +29,6 @@ export type {
   AddReveal3DModelOptions
 } from './components/Reveal3DResources/types';
 export { RevealToolbar } from './components/RevealToolbar/RevealToolbar';
+export { LayersButton } from './components/RevealToolbar/LayersButton';
 export { useFdmAssetMappings } from './hooks/useFdmAssetMappings';
 export { type FdmAssetMappingsConfig } from './hooks/types';

From 84253c9948e377e9864a88e88894d2b364c33ae7 Mon Sep 17 00:00:00 2001
From: Pramod S <87521752+pramodcog@users.noreply.github.com>
Date: Thu, 20 Jul 2023 14:29:59 +0200
Subject: [PATCH 09/20] Update
 react-components/src/components/RevealToolbar/LayersContainer/elements.ts

Co-authored-by: Savelii Novikov <45129444+Savokr@users.noreply.github.com>
---
 .../src/components/RevealToolbar/LayersContainer/elements.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/elements.ts b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
index acfc09f5d74..04b13d41fc2 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
+++ b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
@@ -10,10 +10,7 @@ export const StyledCheckbox = styled(Checkbox)`
 `;
 
 export const StyledMenu = styled(Menu)`
-  display: flex;
-  flex-direction: row;
-  box-shadow: none;
-  padding: 0px;
+  padding: 6px;
 `;
 
 export const StyledSubMenu = styled(Menu)`

From 9ca0c2f7ac90c1e9ff242eba7251854b89b4662c Mon Sep 17 00:00:00 2001
From: Pramod S <87521752+pramodcog@users.noreply.github.com>
Date: Thu, 20 Jul 2023 14:30:14 +0200
Subject: [PATCH 10/20] Update
 react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx

Co-authored-by: Savelii Novikov <45129444+Savokr@users.noreply.github.com>
---
 .../RevealToolbar/LayersContainer/LayersContainer.tsx         | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
index ce1e4c25440..de78017be7d 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
@@ -30,7 +30,5 @@ const Container = styled.div`
 `;
 
 const StyleMenu = styled(Menu)`
-  display: flex;
-  flex-direction: column;
-  padding: 0px 0px 0px 0px;
+  padding: 6px;
 `;

From b4b0b6d4eaf82888c9c6996fc1a1125eadd2962f Mon Sep 17 00:00:00 2001
From: Pramod S <87521752+pramodcog@users.noreply.github.com>
Date: Thu, 20 Jul 2023 14:30:23 +0200
Subject: [PATCH 11/20] Update
 react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx

Co-authored-by: Savelii Novikov <45129444+Savokr@users.noreply.github.com>
---
 .../RevealToolbar/LayersContainer/LayersContainer.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
index de78017be7d..ad2eedce0f0 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
@@ -29,6 +29,6 @@ const Container = styled.div`
   top: calc(-70%);
 `;
 
-const StyleMenu = styled(Menu)`
+const StyledMenu = styled(Menu)`
   padding: 6px;
 `;

From 3e04bec6be63e2c13cee1d00cedfca9a353f2aed Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Fri, 21 Jul 2023 11:01:24 +0200
Subject: [PATCH 12/20] Added model name & number of models in each 3D
 resources UI

---
 .../CadModelLayersContainer.tsx               | 50 ++++++++++---------
 .../Image360LayersContainer.tsx               | 37 +++++++-------
 .../LayersContainer/LayersContainer.tsx       |  5 +-
 .../PointCloudLayersContainer.tsx             | 50 ++++++++++---------
 .../RevealToolbar/LayersContainer/elements.ts | 33 +++++++++++-
 react-components/src/hooks/use3DModelName.tsx | 22 ++++++++
 react-components/src/index.ts                 |  1 +
 7 files changed, 130 insertions(+), 68 deletions(-)
 create mode 100644 react-components/src/hooks/use3DModelName.tsx

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
index a87606f2ee1..1b3909e28d6 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
@@ -5,25 +5,32 @@
 import React, { type ReactElement, useState } from 'react';
 import { useReveal } from '../../RevealContainer/RevealContext';
 import { type CogniteCadModel } from '@cognite/reveal';
-import { Menu } from '@cognite/cogs.js';
-import { StyledCheckbox, StyledSubMenu, StyledMenu } from './elements';
+import { Checkbox, Flex, Menu } from '@cognite/cogs.js';
+import { StyledChipCount, StyledLabel, StyledSubMenu } from './elements';
+import { use3DModelName } from '../../../hooks/use3DModelName';
 
 export const CadModelLayersContainer = (): ReactElement => {
   const viewer = useReveal();
   const cadModels = viewer.models.filter((model) => model.type === 'cad');
+  const cadModelIds = cadModels.map((model) => model.modelId);
+
+  const modelName = use3DModelName(cadModelIds);
 
   const [selectedCadModels, setSelectedCadModels] = useState<
-    Array<{ model: CogniteCadModel; isToggled: boolean }>
+    Array<{ model: CogniteCadModel; isToggled: boolean; name: string }>
   >(
-    cadModels.map((model) => ({
+    cadModels.map((model, index) => ({
       model: model as CogniteCadModel,
-      isToggled: (model as CogniteCadModel).visible
+      isToggled: (model as CogniteCadModel).visible,
+      name: modelName?.data?.[index] ?? 'No model name'
     }))
   );
 
   const [allCadModelVisible, setAllCadModelVisible] = useState(true);
   const [indeterminate, setIndeterminate] = useState<boolean>(false);
 
+  const count = selectedCadModels.length.toString();
+
   const handleCadModelVisibility = (model: CogniteCadModel): void => {
     selectedCadModels.map((data) => {
       if (data.model === model) {
@@ -63,7 +70,7 @@ export const CadModelLayersContainer = (): ReactElement => {
                 handleCadModelVisibility(data.model);
               }
             }}>
-            {data.model.modelId}
+            {data.name}
           </Menu.Item>
         ))}
       </StyledSubMenu>
@@ -71,22 +78,19 @@ export const CadModelLayersContainer = (): ReactElement => {
   };
 
   return (
-    <>
-      {selectedCadModels.length > 0 ? (
-        <StyledMenu>
-          <StyledCheckbox
-            checked={allCadModelVisible}
-            indeterminate={indeterminate}
-            onChange={(e, c) => {
-              e.stopPropagation();
-              handleAllCadModelsVisibility(c as boolean);
-            }}
-          />
-          <Menu.Submenu content={cadModelContent()}>CAD models</Menu.Submenu>
-        </StyledMenu>
-      ) : (
-        <></>
-      )}
-    </>
+    <Menu.Submenu content={cadModelContent()} title="CAD models">
+      <Flex direction="row" justifyContent="space-between" gap={4}>
+        <Checkbox
+          checked={allCadModelVisible}
+          indeterminate={indeterminate}
+          onChange={(e, c) => {
+            e.stopPropagation();
+            handleAllCadModelsVisibility(c as boolean);
+          }}
+        />
+        <StyledLabel> CAD models </StyledLabel>
+        <StyledChipCount label={count} hideTooltip />
+      </Flex>
+    </Menu.Submenu>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
index 0cab03ea466..40ef81adefc 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
@@ -4,8 +4,8 @@
 
 import React, { type ReactElement, useState } from 'react';
 import { useReveal } from '../../RevealContainer/RevealContext';
-import { Menu } from '@cognite/cogs.js';
-import { StyledCheckbox, StyledSubMenu, StyledMenu } from './elements';
+import { Checkbox, Flex, Menu } from '@cognite/cogs.js';
+import { StyledChipCount, StyledLabel, StyledSubMenu } from './elements';
 import { type Image360Collection } from '@cognite/reveal';
 
 export const Image360CollectionLayerContainer = (): ReactElement => {
@@ -24,6 +24,8 @@ export const Image360CollectionLayerContainer = (): ReactElement => {
   const [all360ImagesVisible, setAll360ImagesVisible] = useState(true);
   const [indeterminate, setIndeterminate] = useState<boolean>(false);
 
+  const count = image360Collection.length.toString();
+
   const handle360ImagesVisibility = (image360: Image360Collection): void => {
     selectedImage360Collection.map((data) => {
       if (data.image360 === image360) {
@@ -71,22 +73,19 @@ export const Image360CollectionLayerContainer = (): ReactElement => {
   };
 
   return (
-    <>
-      {selectedImage360Collection.length > 0 ? (
-        <StyledMenu>
-          <StyledCheckbox
-            checked={all360ImagesVisible}
-            indeterminate={indeterminate}
-            onChange={(e, c) => {
-              e.stopPropagation();
-              handleAll360ImagesVisibility(c as boolean);
-            }}
-          />
-          <Menu.Submenu content={image360Content()}>360 images</Menu.Submenu>
-        </StyledMenu>
-      ) : (
-        <></>
-      )}
-    </>
+    <Menu.Submenu content={image360Content()} title="360 images">
+      <Flex direction="row" justifyContent="space-between">
+        <Checkbox
+          checked={all360ImagesVisible}
+          indeterminate={indeterminate}
+          onChange={(e, c) => {
+            e.stopPropagation();
+            handleAll360ImagesVisibility(c as boolean);
+          }}
+        />
+        <StyledLabel> 360 images </StyledLabel>
+        <StyledChipCount label={count} hideTooltip />
+      </Flex>
+    </Menu.Submenu>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
index ad2eedce0f0..9a9ed443da3 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
@@ -14,11 +14,11 @@ import { Image360CollectionLayerContainer } from './Image360LayersContainer';
 export const LayersContainer = (): ReactElement => {
   return (
     <Container>
-      <StyleMenu>
+      <StyledMenu>
         <CadModelLayersContainer />
         <PointCloudLayersContainer />
         <Image360CollectionLayerContainer />
-      </StyleMenu>
+      </StyledMenu>
     </Container>
   );
 };
@@ -31,4 +31,5 @@ const Container = styled.div`
 
 const StyledMenu = styled(Menu)`
   padding: 6px;
+  width: 214px;
 `;
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
index 72630f8fd26..ade1734246d 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
@@ -5,26 +5,33 @@
 import React, { type ReactElement, useState } from 'react';
 
 import { useReveal } from '../../RevealContainer/RevealContext';
-import { Menu } from '@cognite/cogs.js';
-import { StyledCheckbox, StyledSubMenu, StyledMenu } from './elements';
+import { Checkbox, Flex, Menu } from '@cognite/cogs.js';
+import { StyledChipCount, StyledLabel, StyledSubMenu } from './elements';
 import { type CognitePointCloudModel } from '@cognite/reveal';
+import { use3DModelName } from '../../../hooks/use3DModelName';
 
 export const PointCloudLayersContainer = (): ReactElement => {
   const viewer = useReveal();
   const pointCloudModels = viewer.models.filter((model) => model.type === 'pointcloud');
+  const pointCloudModelIds = pointCloudModels.map((model) => model.modelId);
+
+  const modelName = use3DModelName(pointCloudModelIds);
 
   const [selectedPointCloudModels, setSelectedPointCloudModels] = useState<
-    Array<{ model: CognitePointCloudModel; isToggled: boolean }>
+    Array<{ model: CognitePointCloudModel; isToggled: boolean; name: string }>
   >(
-    pointCloudModels.map((model) => ({
+    pointCloudModels.map((model, index) => ({
       model: model as CognitePointCloudModel,
-      isToggled: (model as CognitePointCloudModel).getDefaultPointCloudAppearance().visible ?? true
+      isToggled: (model as CognitePointCloudModel).getDefaultPointCloudAppearance().visible ?? true,
+      name: modelName?.data?.[index] ?? 'No model name'
     }))
   );
 
   const [allPointCloudModelVisible, setAllPointCloudModelVisible] = useState(true);
   const [indeterminate, setIndeterminate] = useState<boolean>(false);
 
+  const count = pointCloudModels.length.toString();
+
   const handlePointCloudVisibility = (model: CognitePointCloudModel): void => {
     selectedPointCloudModels.map((data) => {
       if (data.model === model) {
@@ -63,7 +70,7 @@ export const PointCloudLayersContainer = (): ReactElement => {
                 handlePointCloudVisibility(data.model);
               }
             }}>
-            {data.model.modelId}
+            {data.name}
           </Menu.Item>
         ))}
       </StyledSubMenu>
@@ -71,22 +78,19 @@ export const PointCloudLayersContainer = (): ReactElement => {
   };
 
   return (
-    <>
-      {selectedPointCloudModels.length > 0 ? (
-        <StyledMenu>
-          <StyledCheckbox
-            checked={allPointCloudModelVisible}
-            indeterminate={indeterminate}
-            onChange={(e, c) => {
-              e.stopPropagation();
-              handleAllPointCloudModelsVisibility(c as boolean);
-            }}
-          />
-          <Menu.Submenu content={pointCloudModelContent()}>Point clouds</Menu.Submenu>
-        </StyledMenu>
-      ) : (
-        <></>
-      )}
-    </>
+    <Menu.Submenu content={pointCloudModelContent()} title="Point clouds">
+      <Flex direction="row" justifyContent="space-between">
+        <Checkbox
+          checked={allPointCloudModelVisible}
+          indeterminate={indeterminate}
+          onChange={(e, c) => {
+            e.stopPropagation();
+            handleAllPointCloudModelsVisibility(c as boolean);
+          }}
+        />
+        <StyledLabel> Point clouds </StyledLabel>
+        <StyledChipCount label={count} hideTooltip />
+      </Flex>
+    </Menu.Submenu>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/elements.ts b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
index 04b13d41fc2..a352903e8ff 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
+++ b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
@@ -2,7 +2,7 @@
  * Copyright 2023 Cognite AS
  */
 
-import { Checkbox, Menu } from '@cognite/cogs.js';
+import { Checkbox, Chip, Menu } from '@cognite/cogs.js';
 import styled from 'styled-components';
 
 export const StyledCheckbox = styled(Checkbox)`
@@ -17,3 +17,34 @@ export const StyledSubMenu = styled(Menu)`
   box-shadow: none;
   padding: 8px;
 `;
+
+export const StyledChipCount = styled(Chip)`
+  && {
+    background: #5874ff;
+    border-radius: 2px;
+    width: fit-content;
+    height: 20px;
+    max-height: 20px;
+    min-height: 20px;
+    min-width: 20px;
+    padding: 4px;
+    color: #ffffff;
+
+    /* Font */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 16px;
+  }
+`;
+
+export const StyledLabel = styled.div`
+  /* Font */
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 20px;
+  color: #000000;
+`;
diff --git a/react-components/src/hooks/use3DModelName.tsx b/react-components/src/hooks/use3DModelName.tsx
new file mode 100644
index 00000000000..b354a7667c2
--- /dev/null
+++ b/react-components/src/hooks/use3DModelName.tsx
@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import { useSDK } from '../components/RevealContainer/SDKProvider';
+
+export const use3DModelName = (ids: number[]): UseQueryResult<string[] | undefined, unknown> => {
+  const sdk = useSDK();
+
+  const queryResult = useQuery<string[] | undefined>(['cdf', '3d', 'model', ids], async () => {
+    const modelNames: string[] = await Promise.all(
+      ids.map(async (id) => {
+        const model = await sdk.models3D.retrieve(id);
+        return model.name;
+      })
+    );
+    return modelNames;
+  });
+
+  return queryResult;
+};
diff --git a/react-components/src/index.ts b/react-components/src/index.ts
index 5cc01386038..ff4554bb42a 100644
--- a/react-components/src/index.ts
+++ b/react-components/src/index.ts
@@ -32,3 +32,4 @@ export { RevealToolbar } from './components/RevealToolbar/RevealToolbar';
 export { LayersButton } from './components/RevealToolbar/LayersButton';
 export { useFdmAssetMappings } from './hooks/useFdmAssetMappings';
 export { type FdmAssetMappingsConfig } from './hooks/types';
+export { use3DModelName } from './hooks/use3DModelName';

From 8eec9589a7f892e4d089e5f89198d52c6fed0592 Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Fri, 21 Jul 2023 11:07:32 +0200
Subject: [PATCH 13/20] updated component key to lodash/uniqueId

---
 .../RevealToolbar/LayersContainer/CadModelLayersContainer.tsx  | 3 ++-
 .../RevealToolbar/LayersContainer/Image360LayersContainer.tsx  | 3 ++-
 .../LayersContainer/PointCloudLayersContainer.tsx              | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
index 1b3909e28d6..e6a1a648ad1 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
@@ -8,6 +8,7 @@ import { type CogniteCadModel } from '@cognite/reveal';
 import { Checkbox, Flex, Menu } from '@cognite/cogs.js';
 import { StyledChipCount, StyledLabel, StyledSubMenu } from './elements';
 import { use3DModelName } from '../../../hooks/use3DModelName';
+import uniqueId from 'lodash/uniqueId';
 
 export const CadModelLayersContainer = (): ReactElement => {
   const viewer = useReveal();
@@ -61,7 +62,7 @@ export const CadModelLayersContainer = (): ReactElement => {
       <StyledSubMenu>
         {selectedCadModels.map((data) => (
           <Menu.Item
-            key={data.model.modelId}
+            key={uniqueId()}
             hasCheckbox
             checkboxProps={{
               checked: data.isToggled,
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
index 40ef81adefc..02cbeb4203f 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
@@ -7,6 +7,7 @@ import { useReveal } from '../../RevealContainer/RevealContext';
 import { Checkbox, Flex, Menu } from '@cognite/cogs.js';
 import { StyledChipCount, StyledLabel, StyledSubMenu } from './elements';
 import { type Image360Collection } from '@cognite/reveal';
+import uniqueId from 'lodash/uniqueId';
 
 export const Image360CollectionLayerContainer = (): ReactElement => {
   const viewer = useReveal();
@@ -56,7 +57,7 @@ export const Image360CollectionLayerContainer = (): ReactElement => {
       <StyledSubMenu>
         {selectedImage360Collection.map((data) => (
           <Menu.Item
-            key={data.image360.id}
+            key={uniqueId()}
             hasCheckbox
             checkboxProps={{
               checked: data.isToggled,
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
index ade1734246d..7fe2e2ee78c 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
@@ -9,6 +9,7 @@ import { Checkbox, Flex, Menu } from '@cognite/cogs.js';
 import { StyledChipCount, StyledLabel, StyledSubMenu } from './elements';
 import { type CognitePointCloudModel } from '@cognite/reveal';
 import { use3DModelName } from '../../../hooks/use3DModelName';
+import uniqueId from 'lodash/uniqueId';
 
 export const PointCloudLayersContainer = (): ReactElement => {
   const viewer = useReveal();
@@ -61,7 +62,7 @@ export const PointCloudLayersContainer = (): ReactElement => {
       <StyledSubMenu>
         {selectedPointCloudModels.map((data) => (
           <Menu.Item
-            key={data.model.modelId}
+            key={uniqueId()}
             hasCheckbox
             checkboxProps={{
               checked: data.isToggled,

From c0c608c7bb21f8f7e6a8a3db417390b4276fd946 Mon Sep 17 00:00:00 2001
From: Pramod S <87521752+pramodcog@users.noreply.github.com>
Date: Mon, 24 Jul 2023 09:48:26 +0200
Subject: [PATCH 14/20] Update
 react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx

Co-authored-by: Deep <70804363+deep-cognite@users.noreply.github.com>
---
 .../RevealToolbar/LayersContainer/CadModelLayersContainer.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
index e6a1a648ad1..4b8fa7400cf 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
@@ -35,7 +35,9 @@ export const CadModelLayersContainer = (): ReactElement => {
   const handleCadModelVisibility = (model: CogniteCadModel): void => {
     selectedCadModels.map((data) => {
       if (data.model === model) {
-        data.isToggled = !data.isToggled;
+        return {
+           ..data,
+           isToggled: !data.isToggled
       }
       return data;
     });

From 3adb0b5b9bde30c218921a285bb1a158de0d1279 Mon Sep 17 00:00:00 2001
From: Pramod S <87521752+pramodcog@users.noreply.github.com>
Date: Mon, 24 Jul 2023 09:48:45 +0200
Subject: [PATCH 15/20] Update
 react-components/src/components/RevealToolbar/LayersContainer/elements.ts

Co-authored-by: Savelii Novikov <45129444+Savokr@users.noreply.github.com>
---
 .../components/RevealToolbar/LayersContainer/elements.ts | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/elements.ts b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
index a352903e8ff..2b1de15235b 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
+++ b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
@@ -20,7 +20,6 @@ export const StyledSubMenu = styled(Menu)`
 
 export const StyledChipCount = styled(Chip)`
   && {
-    background: #5874ff;
     border-radius: 2px;
     width: fit-content;
     height: 20px;
@@ -28,14 +27,6 @@ export const StyledChipCount = styled(Chip)`
     min-height: 20px;
     min-width: 20px;
     padding: 4px;
-    color: #ffffff;
-
-    /* Font */
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 12px;
-    line-height: 16px;
   }
 `;
 

From a79d324503f573298d063b196ef5f86afd6ea1ac Mon Sep 17 00:00:00 2001
From: Pramod S <87521752+pramodcog@users.noreply.github.com>
Date: Mon, 24 Jul 2023 09:48:55 +0200
Subject: [PATCH 16/20] Update
 react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx

Co-authored-by: Savelii Novikov <45129444+Savokr@users.noreply.github.com>
---
 .../RevealToolbar/LayersContainer/CadModelLayersContainer.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
index 4b8fa7400cf..8dbe52ace5a 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
@@ -92,7 +92,7 @@ export const CadModelLayersContainer = (): ReactElement => {
           }}
         />
         <StyledLabel> CAD models </StyledLabel>
-        <StyledChipCount label={count} hideTooltip />
+        <StyledChipCount label={count} hideTooltip type='neutral' />
       </Flex>
     </Menu.Submenu>
   );

From a953a953c9b61e1863340aaf8d23a6ef78d7c70f Mon Sep 17 00:00:00 2001
From: Pramod S <87521752+pramodcog@users.noreply.github.com>
Date: Mon, 24 Jul 2023 09:49:20 +0200
Subject: [PATCH 17/20] Update
 react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx

Co-authored-by: Deep <70804363+deep-cognite@users.noreply.github.com>
---
 .../RevealToolbar/LayersContainer/Image360LayersContainer.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
index 02cbeb4203f..03943ee70e8 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
@@ -42,7 +42,7 @@ export const Image360CollectionLayerContainer = (): ReactElement => {
   };
 
   const handleAll360ImagesVisibility = (visible: boolean): void => {
-    selectedImage360Collection.forEach((data) => {
+    [...selectedImage360Collection].forEach((data) => {
       data.isToggled = visible;
       data.image360.setIconsVisibility(data.isToggled);
     });

From 3a34e4c56d1b843aa62480469e81a59addd2069e Mon Sep 17 00:00:00 2001
From: Pramod S <87521752+pramodcog@users.noreply.github.com>
Date: Mon, 24 Jul 2023 09:49:45 +0200
Subject: [PATCH 18/20] Update react-components/src/hooks/use3DModelName.tsx

Co-authored-by: Deep <70804363+deep-cognite@users.noreply.github.com>
---
 react-components/src/hooks/use3DModelName.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react-components/src/hooks/use3DModelName.tsx b/react-components/src/hooks/use3DModelName.tsx
index b354a7667c2..fd4ac4c8e25 100644
--- a/react-components/src/hooks/use3DModelName.tsx
+++ b/react-components/src/hooks/use3DModelName.tsx
@@ -9,7 +9,7 @@ export const use3DModelName = (ids: number[]): UseQueryResult<string[] | undefin
   const sdk = useSDK();
 
   const queryResult = useQuery<string[] | undefined>(['cdf', '3d', 'model', ids], async () => {
-    const modelNames: string[] = await Promise.all(
+    const modelNames: string[] = await Promise.allSettled(
       ids.map(async (id) => {
         const model = await sdk.models3D.retrieve(id);
         return model.name;

From fcc1c809f43014915d355fca2f1a9836e91ce31e Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Mon, 24 Jul 2023 11:18:43 +0200
Subject: [PATCH 19/20] addresed review comments

---
 .../components/RevealToolbar/LayersButton.tsx |  8 ++++++-
 .../CadModelLayersContainer.tsx               | 10 +++++----
 .../LayersContainer/LayersContainer.tsx       |  5 ++---
 react-components/src/hooks/use3DModelName.tsx | 22 ++++++++++++++-----
 4 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/react-components/src/components/RevealToolbar/LayersButton.tsx b/react-components/src/components/RevealToolbar/LayersButton.tsx
index 92b7d426cde..8245db5bac9 100644
--- a/react-components/src/components/RevealToolbar/LayersButton.tsx
+++ b/react-components/src/components/RevealToolbar/LayersButton.tsx
@@ -18,7 +18,13 @@ export const LayersButton = (): ReactElement => {
       content={<LayersContainer />}
       visible={layersEnabled}
       placement="auto">
-      <Button type="ghost" icon="Layers" aria-label="3D Resource layers" onClick={showLayers} />
+      <Button
+        type="ghost"
+        toggled={layersEnabled}
+        icon="Layers"
+        aria-label="3D Resource layers"
+        onClick={showLayers}
+      />
     </Dropdown>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
index 8dbe52ace5a..aabd4eda4d6 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
@@ -36,10 +36,12 @@ export const CadModelLayersContainer = (): ReactElement => {
     selectedCadModels.map((data) => {
       if (data.model === model) {
         return {
-           ..data,
-           isToggled: !data.isToggled
+          ...data,
+          isToggled: !data.isToggled
+        };
+      } else {
+        return data;
       }
-      return data;
     });
     model.visible = !model.visible;
     viewer.requestRedraw();
@@ -92,7 +94,7 @@ export const CadModelLayersContainer = (): ReactElement => {
           }}
         />
         <StyledLabel> CAD models </StyledLabel>
-        <StyledChipCount label={count} hideTooltip type='neutral' />
+        <StyledChipCount label={count} hideTooltip type="neutral" />
       </Flex>
     </Menu.Submenu>
   );
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
index 9a9ed443da3..adc64c3b94f 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
@@ -24,9 +24,8 @@ export const LayersContainer = (): ReactElement => {
 };
 
 const Container = styled.div`
-  position: absolute;
-  left: calc(0%);
-  top: calc(-70%);
+  position: relative;
+  top: 40px;
 `;
 
 const StyledMenu = styled(Menu)`
diff --git a/react-components/src/hooks/use3DModelName.tsx b/react-components/src/hooks/use3DModelName.tsx
index fd4ac4c8e25..d41b4d56073 100644
--- a/react-components/src/hooks/use3DModelName.tsx
+++ b/react-components/src/hooks/use3DModelName.tsx
@@ -2,21 +2,33 @@
  * Copyright 2023 Cognite AS
  */
 
-import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import { type QueryFunction, useQuery, type UseQueryResult } from '@tanstack/react-query';
 import { useSDK } from '../components/RevealContainer/SDKProvider';
 
 export const use3DModelName = (ids: number[]): UseQueryResult<string[] | undefined, unknown> => {
   const sdk = useSDK();
 
-  const queryResult = useQuery<string[] | undefined>(['cdf', '3d', 'model', ids], async () => {
-    const modelNames: string[] = await Promise.allSettled(
+  const queryFunction: QueryFunction<string[] | undefined> = async () => {
+    const modelNamePromises = await Promise.allSettled(
       ids.map(async (id) => {
         const model = await sdk.models3D.retrieve(id);
         return model.name;
       })
     );
-    return modelNames;
-  });
+
+    const modelResolvedNames: string[] = [];
+    modelNamePromises.forEach((modelNamePromise) => {
+      if (modelNamePromise.status === 'fulfilled') {
+        modelResolvedNames.push(modelNamePromise.value);
+      } else if (modelNamePromise.status === 'rejected') {
+        console.error('Error while retriving Model Name', modelNamePromise.reason);
+      }
+    });
+
+    return modelResolvedNames;
+  };
+
+  const queryResult = useQuery<string[] | undefined>(['cdf', '3d', 'model', ids], queryFunction);
 
   return queryResult;
 };

From 759ee6f2b6936e424a0f89f426bd601986f56e2f Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Mon, 24 Jul 2023 14:12:05 +0200
Subject: [PATCH 20/20] Updated pointCloud & 360 image count number styling

---
 .../RevealToolbar/LayersContainer/Image360LayersContainer.tsx   | 2 +-
 .../RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
index 03943ee70e8..07372d5f904 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
@@ -85,7 +85,7 @@ export const Image360CollectionLayerContainer = (): ReactElement => {
           }}
         />
         <StyledLabel> 360 images </StyledLabel>
-        <StyledChipCount label={count} hideTooltip />
+        <StyledChipCount label={count} hideTooltip type="neutral" />
       </Flex>
     </Menu.Submenu>
   );
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
index 7fe2e2ee78c..c8c573861c5 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
@@ -90,7 +90,7 @@ export const PointCloudLayersContainer = (): ReactElement => {
           }}
         />
         <StyledLabel> Point clouds </StyledLabel>
-        <StyledChipCount label={count} hideTooltip />
+        <StyledChipCount label={count} hideTooltip type="neutral" />
       </Flex>
     </Menu.Submenu>
   );