fix(react-components): cad & point cloud models getting added multipl…

…e time due to incorrect transforms (#4957)

* fixed cad & point cloud models getting added multiple time due model transforms is inccorect and also added important css properties for SlicerButton

* lint fix

* forcing RangeSlider css property to fix Search issue

react-components/package.json

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

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

@@ -100,11 +100,13 @@ export function CadModelContainer({
     return cadModel;
 
     async function getOrAddModel(): Promise<CogniteCadModel> {
-      const viewerModel = viewer.models.find(
-        (model) =>
-          isSameModel(model, addModelOptions) &&
+      const viewerModel = viewer.models.find((model) => {
+        const cadModel = { ...model, transform: model.getModelTransformation() };
+        return (
+          isSameModel(cadModel, addModelOptions) &&
           isSameGeometryFilter(geometryFilter, initializingModelsGeometryFilter.current)
-      );
+        );
+      });
 
       if (viewerModel !== undefined) {
         return await Promise.resolve(viewerModel as CogniteCadModel);

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

@@ -107,9 +107,13 @@ export function PointCloudContainer({
     return pointCloudModel;
 
     async function getOrAddModel(): Promise<CognitePointCloudModel<DataSourceType>> {
-      const viewerModel = viewer.models.find((pointCloudModel) =>
-        isSameModel(pointCloudModel, addModelOptions)
-      );
+      const viewerModel = viewer.models.find((pointCloudModel) => {
+        const pointCloudModelClone = {
+          ...pointCloudModel,
+          transform: pointCloudModel.getModelTransformation()
+        };
+        return isSameModel(pointCloudModelClone, addModelOptions);
+      });
 
       if (viewerModel !== undefined) {
         return await Promise.resolve(viewerModel as CognitePointCloudModel<DataSourceType>);

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

@@ -121,22 +121,31 @@ const StyledMenu = styled(Menu)`
   max-width: 32px !important;
   min-width: 32px !important;
   padding: 12px 8px 12px 8px !important;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  overflow: hidden !important;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: center !important;
+  align-items: center !important;
 
   .cogs-v10.cogs-slider .rc-slider-rail {
     height: 100% !important;
     width: 4px !important;
+  }
+
+  .cogs-v10.cogs-slider .rc-slider-track {
+    left: auto !important;
+  }
+
+  .cogs-v10.cogs-slider .rc-slider-handle {
+    margin-left: 0.75px !important;
+  }
 `;
 
 const StyledRangeSlider = styled(RangeSlider)`
   height: 100% !important;
   width: 4px !important;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
+  display: flex !important;
+  flex-direction: row !important;
+  justify-content: center !important;
 }
 `;