From 15a4389156ffb26c98c0aa4fed75db919a190a08 Mon Sep 17 00:00:00 2001
From: "Christopher J. Tannum" <christopher.tannum@cognite.com>
Date: Wed, 5 Jul 2023 16:19:50 +0200
Subject: [PATCH] feat(react-components): expose viewer options (#3468)

* feat: expose viewer options in RevealContainer

* chore: bump package version
---
 react-components/package.json                 |  2 +-
 .../RevealContainer/RevealContainer.tsx       | 21 ++++++++++++++++---
 .../stories/Reveal3DResources.stories.tsx     | 10 ++++++++-
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/react-components/package.json b/react-components/package.json
index bafb654c9b8..0054aecfd1a 100644
--- a/react-components/package.json
+++ b/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
diff --git a/react-components/src/components/RevealContainer/RevealContainer.tsx b/react-components/src/components/RevealContainer/RevealContainer.tsx
index fa09d21a33e..4330ee56046 100644
--- a/react-components/src/components/RevealContainer/RevealContainer.tsx
+++ b/react-components/src/components/RevealContainer/RevealContainer.tsx
@@ -3,7 +3,7 @@
  */
 import { type CogniteClient } from '@cognite/sdk';
 import { useEffect, useRef, type ReactNode, useState, type ReactElement } from 'react';
-import { Cognite3DViewer } from '@cognite/reveal';
+import { Cognite3DViewer, type Cognite3DViewerOptions } from '@cognite/reveal';
 import { RevealContext } from './RevealContext';
 import { type Color } from 'three';
 import { ModelsLoadingStateContext } from '../Reveal3DResources/ModelsLoadingContext';
@@ -12,9 +12,24 @@ type RevealContainerProps = {
   color?: Color;
   sdk: CogniteClient;
   children?: ReactNode;
+  viewerOptions?: Pick<
+    Cognite3DViewerOptions,
+    | 'antiAliasingHint'
+    | 'loadingIndicatorStyle'
+    | 'rendererResolutionThreshold'
+    | 'antiAliasingHint'
+    | 'ssaoQualityHint'
+    | 'pointCloudEffects'
+    | 'enableEdges'
+  >;
 };
 
-export function RevealContainer({ children, sdk, color }: RevealContainerProps): ReactElement {
+export function RevealContainer({
+  children,
+  sdk,
+  color,
+  viewerOptions
+}: RevealContainerProps): ReactElement {
   const [viewer, setViewer] = useState<Cognite3DViewer>();
   const revealDomElementRef = useRef<HTMLDivElement>(null);
 
@@ -45,7 +60,7 @@ export function RevealContainer({ children, sdk, color }: RevealContainerProps):
     if (domElement === null) {
       throw new Error('Failure in mounting RevealContainer to DOM.');
     }
-    const viewer = new Cognite3DViewer({ sdk, domElement });
+    const viewer = new Cognite3DViewer({ ...viewerOptions, sdk, domElement });
     viewer.setBackgroundColor({ color, alpha: 1 });
     setViewer(viewer);
   }
diff --git a/react-components/stories/Reveal3DResources.stories.tsx b/react-components/stories/Reveal3DResources.stories.tsx
index 78552be355a..33426b46088 100644
--- a/react-components/stories/Reveal3DResources.stories.tsx
+++ b/react-components/stories/Reveal3DResources.stories.tsx
@@ -40,7 +40,15 @@ export const Main: Story = {
     ]
   },
   render: ({ resources }) => (
-    <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
+    <RevealContainer
+      sdk={sdk}
+      color={new Color(0x4a4a4a)}
+      viewerOptions={{
+        loadingIndicatorStyle: {
+          opacity: 1,
+          placement: 'topRight'
+        }
+      }}>
       <Reveal3DResources resources={resources} />
       <CameraController
         initialFitCamera={{