chore: simplify quality component

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);
   };
 

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 />
     </>

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>
   );
 };

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
+  );
+}

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;
 };

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';

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 />