From 3caae2de9bd0b5ab5c92e93cd3d9be5a7271ca4c Mon Sep 17 00:00:00 2001
From: Christopher Tannum <christopher.tannum@cognite.com>
Date: Tue, 15 Aug 2023 17:57:14 +0200
Subject: [PATCH] chore: simplify quality component

---
 .../components/RevealToolbar/LayersButton.tsx |   2 -
 .../RevealToolbar/RevealToolbar.tsx           |  11 +-
 .../RevealToolbar/SettingsButton.tsx          |  53 +++------
 .../HighFidelityContainer.tsx                 | 107 ++++++++++--------
 .../SettingsContainer/SettingsContainer.tsx   |  28 -----
 .../RevealToolbar/SettingsContainer/types.ts  |  30 ++---
 react-components/src/index.ts                 |   1 +
 react-components/src/utilities/DeepPartial.ts |   7 --
 react-components/stories/Toolbar.stories.tsx  |  40 ++++---
 9 files changed, 118 insertions(+), 161 deletions(-)
 delete mode 100644 react-components/src/components/RevealToolbar/SettingsContainer/SettingsContainer.tsx
 delete mode 100644 react-components/src/utilities/DeepPartial.ts

diff --git a/react-components/src/components/RevealToolbar/LayersButton.tsx b/react-components/src/components/RevealToolbar/LayersButton.tsx
index 0818674351e..185d31ca562 100644
--- a/react-components/src/components/RevealToolbar/LayersButton.tsx
+++ b/react-components/src/components/RevealToolbar/LayersButton.tsx
@@ -20,7 +20,6 @@ import { useRevealContainerElement } from '../RevealContainer/RevealContainerEle
 export const LayersButton = (): ReactElement => {
   const viewer = useReveal();
   const revealContainerElement = useRevealContainerElement();
-  const [layersEnabled, setLayersEnabled] = useState<boolean>(false);
   const [visible, setVisible] = useState<boolean>(false);
 
   const [cadModelIds, setCadModelIds] = useState<number[]>([]);
@@ -38,7 +37,6 @@ export const LayersButton = (): ReactElement => {
   const pointCloudModelName = use3DModelName(pointCloudModelIds);
 
   const showLayers = (): void => {
-    setLayersEnabled(!layersEnabled);
     setVisible((prevState) => !prevState);
   };
 
diff --git a/react-components/src/components/RevealToolbar/RevealToolbar.tsx b/react-components/src/components/RevealToolbar/RevealToolbar.tsx
index 1239e8aa540..78cd66095ee 100644
--- a/react-components/src/components/RevealToolbar/RevealToolbar.tsx
+++ b/react-components/src/components/RevealToolbar/RevealToolbar.tsx
@@ -11,8 +11,7 @@ import { SettingsButton } from './SettingsButton';
 import { withSuppressRevealEvents } from '../../higher-order-components/withSuppressRevealEvents';
 import { MeasurementButton } from './MeasurementButton';
 import { HelpButton } from './HelpButton';
-import { type QualityConfig } from './SettingsContainer/types';
-import { type DeepPartial } from '../../utilities/DeepPartial';
+import { type QualitySettings } from './SettingsContainer/types';
 
 const defaultStyle: ToolBarProps = {
   style: {
@@ -24,7 +23,8 @@ const defaultStyle: ToolBarProps = {
 
 type RevealToolbarProps = ToolBarProps & {
   customSettingsContent?: JSX.Element;
-  highFidelityConfig?: DeepPartial<QualityConfig>;
+  lowFidelitySettings?: Partial<QualitySettings>;
+  highFidelitySettings?: Partial<QualitySettings>;
 };
 
 const DefaultContentWrapper = (props: RevealToolbarProps): ReactElement => {
@@ -42,8 +42,9 @@ const DefaultContentWrapper = (props: RevealToolbarProps): ReactElement => {
       <div className="cogs-toolbar-divider" />
 
       <SettingsButton
-        customSettingsContent={props.customSettingsContent ?? undefined}
-        highFidelityConfig={props.highFidelityConfig ?? undefined}
+        customSettingsContent={props.customSettingsContent}
+        lowQualitySettings={props.lowFidelitySettings}
+        highQualitySettings={props.highFidelitySettings}
       />
       <HelpButton />
     </>
diff --git a/react-components/src/components/RevealToolbar/SettingsButton.tsx b/react-components/src/components/RevealToolbar/SettingsButton.tsx
index a45dcc51270..cce9991c63d 100644
--- a/react-components/src/components/RevealToolbar/SettingsButton.tsx
+++ b/react-components/src/components/RevealToolbar/SettingsButton.tsx
@@ -2,57 +2,36 @@
  * Copyright 2023 Cognite AS
  */
 
-import { useState, type ReactElement, useMemo } from 'react';
-import { Button, Dropdown } from '@cognite/cogs.js';
-import { SettingsContainer } from './SettingsContainer/SettingsContainer';
-import { type ResolutionOptions } from '@cognite/reveal';
-import { useReveal } from '../RevealContainer/RevealContext';
-import { type DeepPartial } from '../../utilities/DeepPartial';
-import { type QualityConfig } from './SettingsContainer/types';
+import { type ReactElement } from 'react';
+import { Button, Dropdown, Menu } from '@cognite/cogs.js';
+import { type QualitySettings } from './SettingsContainer/types';
+import { HighFidelityContainer } from './SettingsContainer/HighFidelityContainer';
 
 type CustomSettingsProps = {
   customSettingsContent?: ReactElement;
-  highFidelityConfig?: DeepPartial<QualityConfig>;
+  lowQualitySettings?: Partial<QualitySettings>;
+  highQualitySettings?: Partial<QualitySettings>;
 };
 
 export const SettingsButton = ({
   customSettingsContent,
-  highFidelityConfig
+  lowQualitySettings,
+  highQualitySettings
 }: CustomSettingsProps): ReactElement => {
-  const viewer = useReveal();
-  const [, setSettingsEnabled] = useState(false);
-  const [isHighQualityMode, setHighQualityMode] = useState(false);
-  const SettingsButton = (): void => {
-    setSettingsEnabled((prevState) => !prevState);
-  };
-
-  const defaultsQualityConfig = useMemo(() => {
-    return {
-      pointCloudBudget: { ...viewer.pointCloudBudget },
-      cadBudget: { ...viewer.cadBudget },
-      resolutionOptions: {
-        maxRenderResolution: 1.4e6,
-        movingCameraResolutionFactor: 1
-      } satisfies ResolutionOptions
-    };
-  }, [viewer]);
-
   return (
     <Dropdown
       appendTo={document.body}
       content={
-        <SettingsContainer
-          customSettingsContent={customSettingsContent}
-          isHighFidelityMode={isHighQualityMode}
-          setHighFidelityMode={setHighQualityMode}
-          defaultsQualityConfig={defaultsQualityConfig}
-          highFidelityConfig={
-            highFidelityConfig ?? { pointCloudBudget: {}, cadBudget: {}, resolutionOptions: {} }
-          }
-        />
+        <Menu>
+          <HighFidelityContainer
+            lowQualitySettings={lowQualitySettings}
+            highQualitySettings={highQualitySettings}
+          />
+          {customSettingsContent ?? <></>}
+        </Menu>
       }
       placement="auto">
-      <Button onClick={SettingsButton} icon="Settings" type="ghost" aria-label="Show settings" />
+      <Button icon="Settings" type="ghost" aria-label="Show settings" />
     </Dropdown>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/SettingsContainer/HighFidelityContainer.tsx b/react-components/src/components/RevealToolbar/SettingsContainer/HighFidelityContainer.tsx
index 89221f22362..4eea5612769 100644
--- a/react-components/src/components/RevealToolbar/SettingsContainer/HighFidelityContainer.tsx
+++ b/react-components/src/components/RevealToolbar/SettingsContainer/HighFidelityContainer.tsx
@@ -2,66 +2,75 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type ReactElement, useEffect, useMemo } from 'react';
+import { type ReactElement, useState } from 'react';
 import { Menu } from '@cognite/cogs.js';
 import { useReveal } from '../../RevealContainer/RevealContext';
-import { type HighFidelityProps } from './types';
-import { FIDELITY_MULTIPLIER } from '../../../utilities/constants';
+import { type QualitySettings, type HighFidelityProps } from './types';
+import { type Cognite3DViewer } from '@cognite/reveal';
+
+const defaultLowFidelitySettings: QualitySettings = {
+  cadBudget: {
+    maximumRenderCost: 15_000_000,
+    highDetailProximityThreshold: 10
+  },
+  pointCloudBudget: {
+    numberOfPoints: 3_000_000
+  },
+  resolutionOptions: {
+    maxRenderResolution: 1.4e6,
+    movingCameraResolutionFactor: 1
+  }
+};
+
+const defaultHighFidelitySettings: QualitySettings = {
+  cadBudget: {
+    maximumRenderCost: 45_000_000,
+    highDetailProximityThreshold: 30
+  },
+  pointCloudBudget: {
+    numberOfPoints: 12_000_000
+  },
+  resolutionOptions: {
+    maxRenderResolution: Infinity,
+    movingCameraResolutionFactor: 1
+  }
+};
 
 export const HighFidelityContainer = ({
-  isHighFidelityMode,
-  setHighFidelityMode,
-  defaultsQualityConfig,
-  highFidelityConfig
+  lowQualitySettings,
+  highQualitySettings
 }: HighFidelityProps): ReactElement => {
   const viewer = useReveal();
+  const [active, setActive] = useState(!isLowFidelity(viewer));
 
-  const qualityConfig = useMemo(() => {
-    if (isHighFidelityMode) {
-      return {
-        pointCloudBudget: {
-          numberOfPoints:
-            highFidelityConfig?.pointCloudBudget?.numberOfPoints ??
-            defaultsQualityConfig.pointCloudBudget.numberOfPoints * FIDELITY_MULTIPLIER
-        },
-        cadBudget: {
-          maximumRenderCost:
-            highFidelityConfig?.cadBudget?.maximumRenderCost ??
-            defaultsQualityConfig.cadBudget.maximumRenderCost * FIDELITY_MULTIPLIER,
-          highDetailProximityThreshold:
-            highFidelityConfig?.cadBudget?.highDetailProximityThreshold ??
-            defaultsQualityConfig.cadBudget.highDetailProximityThreshold * FIDELITY_MULTIPLIER
-        },
-        resolutionOptions: {
-          maxRenderResolution:
-            highFidelityConfig?.resolutionOptions?.maxRenderResolution ?? Infinity
-        }
-      };
-    } else {
-      return {
-        pointCloudBudget: { ...defaultsQualityConfig.pointCloudBudget },
-        cadBudget: { ...defaultsQualityConfig.cadBudget },
-        resolutionOptions: {
-          maxRenderResolution: 1.4e6
-        }
-      };
-    }
-  }, [isHighFidelityMode, defaultsQualityConfig, highFidelityConfig]);
+  const lowFidelityOptions: QualitySettings = {
+    ...defaultLowFidelitySettings,
+    ...lowQualitySettings
+  };
+  const highFidelityOptions: QualitySettings = {
+    ...defaultHighFidelitySettings,
+    ...highQualitySettings
+  };
 
-  useEffect(() => {
-    viewer.cadBudget = qualityConfig.cadBudget;
-    viewer.pointCloudBudget = qualityConfig.pointCloudBudget;
-    viewer.setResolutionOptions(qualityConfig.resolutionOptions);
-  }, [viewer, qualityConfig]);
+  const onClick = (): void => {
+    const config = active ? lowFidelityOptions : highFidelityOptions;
+    viewer.cadBudget = config.cadBudget;
+    viewer.pointCloudBudget = config.pointCloudBudget;
+    viewer.setResolutionOptions(config.resolutionOptions);
+    setActive((prevState) => !prevState);
+  };
 
   return (
-    <Menu.Item
-      hasSwitch
-      toggled={isHighFidelityMode}
-      onChange={() => {
-        setHighFidelityMode((prevState) => !prevState);
-      }}>
+    <Menu.Item hasSwitch toggled={active} onChange={onClick}>
       High fidelity
     </Menu.Item>
   );
 };
+
+function isLowFidelity(viewer: Cognite3DViewer): boolean {
+  return (
+    viewer.cadBudget.maximumRenderCost <= defaultLowFidelitySettings.cadBudget.maximumRenderCost &&
+    viewer.pointCloudBudget.numberOfPoints <=
+      defaultLowFidelitySettings.pointCloudBudget.numberOfPoints
+  );
+}
diff --git a/react-components/src/components/RevealToolbar/SettingsContainer/SettingsContainer.tsx b/react-components/src/components/RevealToolbar/SettingsContainer/SettingsContainer.tsx
deleted file mode 100644
index b3c86b73c00..00000000000
--- a/react-components/src/components/RevealToolbar/SettingsContainer/SettingsContainer.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/*!
- * Copyright 2023 Cognite AS
- */
-
-import { Menu } from '@cognite/cogs.js';
-import { type ReactElement } from 'react';
-import { HighFidelityContainer } from './HighFidelityContainer';
-import { type SettingsContainerProps } from './types';
-
-export const SettingsContainer = ({
-  isHighFidelityMode,
-  setHighFidelityMode,
-  defaultsQualityConfig,
-  highFidelityConfig,
-  customSettingsContent
-}: SettingsContainerProps): ReactElement => {
-  return (
-    <Menu>
-      <HighFidelityContainer
-        isHighFidelityMode={isHighFidelityMode}
-        setHighFidelityMode={setHighFidelityMode}
-        defaultsQualityConfig={defaultsQualityConfig}
-        highFidelityConfig={highFidelityConfig}
-      />
-      {customSettingsContent ?? <></>}
-    </Menu>
-  );
-};
diff --git a/react-components/src/components/RevealToolbar/SettingsContainer/types.ts b/react-components/src/components/RevealToolbar/SettingsContainer/types.ts
index dc84d6251b4..a2ff8995daa 100644
--- a/react-components/src/components/RevealToolbar/SettingsContainer/types.ts
+++ b/react-components/src/components/RevealToolbar/SettingsContainer/types.ts
@@ -2,30 +2,24 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type Dispatch, type SetStateAction, type ReactElement } from 'react';
-import { type DeepPartial } from '../../../utilities/DeepPartial';
+import {
+  type CadModelBudget,
+  type PointCloudBudget,
+  type ResolutionOptions
+} from '@cognite/reveal';
+import { type ReactElement } from 'react';
 
 export type HighFidelityProps = {
-  isHighFidelityMode: boolean;
-  setHighFidelityMode: Dispatch<SetStateAction<boolean>>;
-  defaultsQualityConfig: QualityConfig;
-  highFidelityConfig?: DeepPartial<QualityConfig>;
+  lowQualitySettings?: Partial<QualitySettings>;
+  highQualitySettings?: Partial<QualitySettings>;
 };
 
 export type SettingsContainerProps = HighFidelityProps & {
   customSettingsContent?: ReactElement;
 };
 
-export type QualityConfig = {
-  cadBudget: {
-    highDetailProximityThreshold: number;
-    maximumRenderCost: number;
-  };
-  pointCloudBudget: {
-    numberOfPoints: number;
-  };
-  resolutionOptions: {
-    maxRenderResolution: number;
-    movingCameraResolutionFactor: number;
-  };
+export type QualitySettings = {
+  cadBudget: CadModelBudget;
+  pointCloudBudget: PointCloudBudget;
+  resolutionOptions: ResolutionOptions;
 };
diff --git a/react-components/src/index.ts b/react-components/src/index.ts
index fd392743e9f..8186f7d92d0 100644
--- a/react-components/src/index.ts
+++ b/react-components/src/index.ts
@@ -46,3 +46,4 @@ export type {
 } from './components/Reveal3DResources/types';
 export type { CameraNavigationActions } from './hooks/useCameraNavigation';
 export type { Source } from './utilities/FdmSDK';
+export type { QualitySettings } from './components/RevealToolbar/SettingsContainer/types';
diff --git a/react-components/src/utilities/DeepPartial.ts b/react-components/src/utilities/DeepPartial.ts
deleted file mode 100644
index 3f238cfcb15..00000000000
--- a/react-components/src/utilities/DeepPartial.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/*!
- * Copyright 2023 Cognite AS
- */
-
-export type DeepPartial<T> = {
-  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
-};
diff --git a/react-components/stories/Toolbar.stories.tsx b/react-components/stories/Toolbar.stories.tsx
index aa3ed4c5edf..50b52f422a5 100644
--- a/react-components/stories/Toolbar.stories.tsx
+++ b/react-components/stories/Toolbar.stories.tsx
@@ -5,6 +5,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import {
   CadModelContainer,
+  type QualitySettings,
   RevealContainer,
   RevealToolbar,
   withSuppressRevealEvents
@@ -65,24 +66,32 @@ const exampleCustomSettingElements = (): ReactElement => {
   );
 };
 
-type CustomHighFidelitySettings = {
+const exampleHighQualitySettings: QualitySettings = {
   cadBudget: {
-    maximumRenderCost: number;
-  };
+    maximumRenderCost: 95000000,
+    highDetailProximityThreshold: 100
+  },
   pointCloudBudget: {
-    numberOfPoints: number;
-  };
+    numberOfPoints: 12000000
+  },
+  resolutionOptions: {
+    maxRenderResolution: Infinity,
+    movingCameraResolutionFactor: 1
+  }
 };
 
-const exampleHighFedilitySettings = (): CustomHighFidelitySettings => {
-  return {
-    cadBudget: {
-      maximumRenderCost: 95000000
-    },
-    pointCloudBudget: {
-      numberOfPoints: 12000000
-    }
-  };
+const exampleLowQualitySettings: QualitySettings = {
+  cadBudget: {
+    maximumRenderCost: 95000000,
+    highDetailProximityThreshold: 100
+  },
+  pointCloudBudget: {
+    numberOfPoints: 12000000
+  },
+  resolutionOptions: {
+    maxRenderResolution: 1e5,
+    movingCameraResolutionFactor: 1
+  }
 };
 
 export const Main: Story = {
@@ -97,7 +106,8 @@ export const Main: Story = {
       <CadModelContainer addModelOptions={addModelOptions} />
       <RevealToolbar
         customSettingsContent={exampleCustomSettingElements()}
-        highFidelityConfig={exampleHighFedilitySettings()}
+        lowFidelitySettings={exampleLowQualitySettings}
+        highFidelitySettings={exampleHighQualitySettings}
       />
       <MyCustomToolbar>
         <RevealToolbar.FitModelsButton />