fix(react-components): slider UI issue and exposed logMetrics option …

…in RevealContext props (#4955)
cognitedata · Jan 9, 2025 · dcbd7fd · dcbd7fd
1 parent 1ab3dee
commit dcbd7fd
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/react-components/package.json b/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.73.11",
+  "version": "0.73.12",
   "exports": {
     ".": {
       "import": "./dist/index.js",

diff --git a/react-components/src/components/RevealContext/RevealContext.tsx b/react-components/src/components/RevealContext/RevealContext.tsx
@@ -33,6 +33,7 @@ export type RevealContextProps = {
     | 'pointCloudEffects'
     | 'enableEdges'
     | 'onLoading'
+    | 'logMetrics'
   >;
 };
 

diff --git a/react-components/src/components/RevealToolbar/SlicerButton.tsx b/react-components/src/components/RevealToolbar/SlicerButton.tsx
@@ -102,7 +102,7 @@ export const SlicerButton = (): ReactElement => {
           <Button {...props} type="ghost" icon=<SliceIcon /> aria-label="Slice models" />
         </CogsTooltip>
       )}>
-      <RangeSlider
+      <StyledRangeSlider
         min={0}
         max={1}
         step={0.01}
@@ -122,4 +122,21 @@ const StyledMenu = styled(Menu)`
   min-width: 32px !important;
   padding: 12px 8px 12px 8px !important;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .cogs-v10.cogs-slider .rc-slider-rail {
+    height: 100% !important;
+    width: 4px !important;
+`;
+
+const StyledRangeSlider = styled(RangeSlider)`
+  height: 100% !important;
+  width: 4px !important;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
 `;