From f0d7c6af55129186c4fa99caab11988d97fcaea0 Mon Sep 17 00:00:00 2001
From: Nils Petter Fremming <nils.fremming@cognite.com>
Date: Wed, 19 Jun 2024 15:33:40 +0200
Subject: [PATCH 01/10] Add options as a part of the achiteture

---
 .../architecture/base/commands/BaseCommand.ts |  16 ++-
 .../base/commands/BaseOptionCommand.ts        |  41 +++++++
 .../concreteCommands/SetSpeedOptionCommand.ts |  46 ++++++++
 .../base/domainObjects/DomainObject.ts        |   4 +-
 .../concrete/config/StoryBookConfig.ts        |   2 +
 .../components/Architecture/CommandButton.tsx |  42 ++++---
 .../Architecture/DomainObjectPanel.tsx        |  20 +++-
 .../components/Architecture/OptionButton.tsx  | 111 ++++++++++++++++++
 .../src/components/Architecture/Utilities.tsx |  47 ++++++++
 9 files changed, 300 insertions(+), 29 deletions(-)
 create mode 100644 react-components/src/architecture/base/commands/BaseOptionCommand.ts
 create mode 100644 react-components/src/architecture/base/concreteCommands/SetSpeedOptionCommand.ts
 create mode 100644 react-components/src/components/Architecture/OptionButton.tsx
 create mode 100644 react-components/src/components/Architecture/Utilities.tsx

diff --git a/react-components/src/architecture/base/commands/BaseCommand.ts b/react-components/src/architecture/base/commands/BaseCommand.ts
index f78a685e8f6..274c0d8d200 100644
--- a/react-components/src/architecture/base/commands/BaseCommand.ts
+++ b/react-components/src/architecture/base/commands/BaseCommand.ts
@@ -2,7 +2,7 @@
  * Copyright 2024 Cognite AS
  */
 
-import { type TranslateKey } from '../utilities/TranslateKey';
+import { type TranslateDelegate, type TranslateKey } from '../utilities/TranslateKey';
 import { clear, remove } from '../utilities/extensions/arrayExtensions';
 
 type UpdateDelegate = (command: BaseCommand) => void;
@@ -44,7 +44,7 @@ export abstract class BaseCommand {
   // =================================================
 
   public get name(): string {
-    return this.tooltip.fallback ?? this.tooltip.key;
+    return this.tooltip.fallback;
   }
 
   public get shortCutKey(): string | undefined {
@@ -55,8 +55,8 @@ export abstract class BaseCommand {
     return { fallback: '' };
   }
 
-  public get icon(): string {
-    return 'Unknown';
+  public get icon(): string | undefined {
+    return undefined; // Means no icon
   }
 
   public get buttonType(): string {
@@ -128,4 +128,12 @@ export abstract class BaseCommand {
       listener(this);
     }
   }
+
+  public getLabel(translate: TranslateDelegate): string {
+    const { key, fallback } = this.tooltip;
+    if (key === undefined) {
+      return fallback;
+    }
+    return translate(key, fallback);
+  }
 }
diff --git a/react-components/src/architecture/base/commands/BaseOptionCommand.ts b/react-components/src/architecture/base/commands/BaseOptionCommand.ts
new file mode 100644
index 00000000000..4321a51a1eb
--- /dev/null
+++ b/react-components/src/architecture/base/commands/BaseOptionCommand.ts
@@ -0,0 +1,41 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { type RevealRenderTarget } from '../renderTarget/RevealRenderTarget';
+import { BaseCommand } from './BaseCommand';
+import { RenderTargetCommand } from './RenderTargetCommand';
+
+/**
+ * Base class for all command and tools. These are object that can do a
+ * user interaction with the system. It also have enough information to
+ * generate the UI for the command.
+ */
+
+export abstract class BaseOptionCommand extends BaseCommand {
+  private _options: BaseCommand[] | undefined = undefined;
+
+  // ==================================================
+  // VIRTUAL METHODS
+  // ==================================================
+
+  public createOptions(): BaseCommand[] {
+    return []; // Override this to add options
+  }
+
+  // ==================================================
+  // INSTANCE METHODS
+  // ==================================================
+
+  public getOptions(renderTarget: RevealRenderTarget): BaseCommand[] {
+    if (this._options === undefined) {
+      this._options = this.createOptions();
+      for (const option of this._options) {
+        if (option instanceof RenderTargetCommand) {
+          option.attach(renderTarget);
+        }
+      }
+    }
+    return this._options;
+  }
+}
diff --git a/react-components/src/architecture/base/concreteCommands/SetSpeedOptionCommand.ts b/react-components/src/architecture/base/concreteCommands/SetSpeedOptionCommand.ts
new file mode 100644
index 00000000000..3c81e8e1f9b
--- /dev/null
+++ b/react-components/src/architecture/base/concreteCommands/SetSpeedOptionCommand.ts
@@ -0,0 +1,46 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { type BaseCommand } from '../commands/BaseCommand';
+import { BaseOptionCommand } from '../commands/BaseOptionCommand';
+import { RenderTargetCommand } from '../commands/RenderTargetCommand';
+import { type TranslateKey } from '../utilities/TranslateKey';
+
+export class SetSpeedOptionCommand extends BaseOptionCommand {
+  // ==================================================
+  // OVERRIDES
+  // ==================================================
+
+  public override get tooltip(): TranslateKey {
+    return { key: 'SPEED', fallback: 'Speed' };
+  }
+
+  public override createOptions(): BaseCommand[] {
+    return [new SpeedCommand(1), new SpeedCommand(2), new SpeedCommand(4)];
+  }
+}
+
+class SpeedCommand extends RenderTargetCommand {
+  static currentSpeed: number = 1;
+  private readonly _value;
+
+  public constructor(value: number) {
+    super();
+    this._value = value;
+  }
+
+  public override get tooltip(): TranslateKey {
+    return { fallback: 'x' + this._value.toString() };
+  }
+
+  public override get isChecked(): boolean {
+    return this._value === SpeedCommand.currentSpeed;
+  }
+
+  public override invokeCore(): boolean {
+    // this.renderTarget.flexibleCameraManager;
+    SpeedCommand.currentSpeed = this._value;
+    return true;
+  }
+}
diff --git a/react-components/src/architecture/base/domainObjects/DomainObject.ts b/react-components/src/architecture/base/domainObjects/DomainObject.ts
index 4b93b116463..520e83db5cf 100644
--- a/react-components/src/architecture/base/domainObjects/DomainObject.ts
+++ b/react-components/src/architecture/base/domainObjects/DomainObject.ts
@@ -323,8 +323,8 @@ export abstract class DomainObject {
   // VIRTUAL METHODS: Others
   // ==================================================
 
-  public get icon(): string {
-    return 'Unknown';
+  public get icon(): string | undefined {
+    return undefined;
   }
 
   /**
diff --git a/react-components/src/architecture/concrete/config/StoryBookConfig.ts b/react-components/src/architecture/concrete/config/StoryBookConfig.ts
index adee0bac141..bd2685a53c8 100644
--- a/react-components/src/architecture/concrete/config/StoryBookConfig.ts
+++ b/react-components/src/architecture/concrete/config/StoryBookConfig.ts
@@ -19,6 +19,7 @@ import { type BaseTool } from '../../base/commands/BaseTool';
 import { ToggleMetricUnitsCommand } from '../../base/concreteCommands/ToggleMetricUnitsCommand';
 import { MeasurementTool } from '../measurements/MeasurementTool';
 import { ClipTool } from '../clipping/ClipTool';
+import { SetSpeedOptionCommand } from '../../base/concreteCommands/SetSpeedOptionCommand';
 
 export class StoryBookConfig extends BaseRevealConfig {
   // ==================================================
@@ -37,6 +38,7 @@ export class StoryBookConfig extends BaseRevealConfig {
       new FitViewCommand(),
       new SetAxisVisibleCommand(),
       new ToggleMetricUnitsCommand(),
+      new SetSpeedOptionCommand(),
       undefined,
       new ExampleTool(),
       new MeasurementTool(),
diff --git a/react-components/src/components/Architecture/CommandButton.tsx b/react-components/src/components/Architecture/CommandButton.tsx
index fa104b2c53a..96422486ae1 100644
--- a/react-components/src/components/Architecture/CommandButton.tsx
+++ b/react-components/src/components/Architecture/CommandButton.tsx
@@ -9,6 +9,9 @@ import { useTranslation } from '../i18n/I18n';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import { type RevealRenderTarget } from '../../architecture/base/renderTarget/RevealRenderTarget';
 import { RenderTargetCommand } from '../../architecture/base/commands/RenderTargetCommand';
+import { OptionButton } from './OptionButton';
+import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
+import { getButtonType, getIcon, getTooltipPlacement } from './Utilities';
 
 export const CommandButtons = ({
   commands,
@@ -27,7 +30,11 @@ export const CommandButtons = ({
 };
 
 export const CreateCommandButton = (command: BaseCommand, isHorizontal = false): ReactElement => {
-  return <CommandButton command={command} isHorizontal={isHorizontal} />;
+  if (command instanceof BaseOptionCommand) {
+    return <OptionButton command={command} isHorizontal={isHorizontal} />;
+  } else {
+    return <CommandButton command={command} isHorizontal={isHorizontal} />;
+  }
 };
 
 export const CommandButton = ({
@@ -45,7 +52,7 @@ export const CommandButton = ({
   const [isEnabled, setEnabled] = useState<boolean>(true);
   const [isVisible, setVisible] = useState<boolean>(true);
   const [uniqueId, setUniqueId] = useState<number>(0);
-  const [icon, setIcon] = useState<IconType>('Copy');
+  const [icon, setIcon] = useState<IconType | undefined>(undefined);
 
   useEffect(() => {
     function update(command: BaseCommand): void {
@@ -53,7 +60,7 @@ export const CommandButton = ({
       setEnabled(command.isEnabled);
       setVisible(command.isVisible);
       setUniqueId(command.uniqueId);
-      setIcon(command.icon as IconType);
+      setIcon(getIcon(command));
     }
     update(newCommand);
     newCommand.addEventListener(update);
@@ -65,23 +72,18 @@ export const CommandButton = ({
   if (!isVisible) {
     return <></>;
   }
-  const placement = isHorizontal ? 'top' : 'right';
-  const { key, fallback } = newCommand.tooltip;
-  // This was the only way it went through compiler: (more button types will be added in the future)
-  const type = newCommand.buttonType;
-  if (type !== 'ghost' && type !== 'ghost-destructive' && type !== 'primary') {
-    return <></>;
-  }
-  const text = key === undefined ? fallback : t(key, fallback);
+  const placement = getTooltipPlacement(isHorizontal);
+  const tooltip = newCommand.getLabel(t);
   return (
-    <CogsTooltip content={text} placement={placement} appendTo={document.body}>
+    <CogsTooltip content={tooltip} placement={placement} appendTo={document.body}>
       <Button
-        type={type}
+        type={getButtonType(newCommand)}
         icon={icon}
         key={uniqueId}
-        toggled={isChecked}
         disabled={!isEnabled}
-        aria-label={text}
+        toggled={isChecked}
+        aria-label={tooltip}
+        iconPlacement="right"
         onClick={() => {
           newCommand.invoke();
         }}
@@ -90,7 +92,10 @@ export const CommandButton = ({
   );
 };
 
-function getDefaultCommand(newCommand: BaseCommand, renderTarget: RevealRenderTarget): BaseCommand {
+export function getDefaultCommand(
+  newCommand: BaseCommand,
+  renderTarget: RevealRenderTarget
+): BaseCommand {
   // If it exists from before, return the existing command
   // Otherwise, add the new command to the controller and attach the renderTarget.
   if (!newCommand.hasData) {
@@ -115,5 +120,8 @@ function addCommandButton(
     const direction = !isHorizontal ? 'horizontal' : 'vertical';
     return <Divider key={index} weight="2px" length="24px" direction={direction} />;
   }
-  return <CommandButton key={command.uniqueId} command={command} isHorizontal={isHorizontal} />;
+  if (command instanceof BaseOptionCommand)
+    return <OptionButton key={command.uniqueId} command={command} isHorizontal={isHorizontal} />;
+  else
+    return <CommandButton key={command.uniqueId} command={command} isHorizontal={isHorizontal} />;
 }
diff --git a/react-components/src/components/Architecture/DomainObjectPanel.tsx b/react-components/src/components/Architecture/DomainObjectPanel.tsx
index aa911ab48b3..a7ce981c73e 100644
--- a/react-components/src/components/Architecture/DomainObjectPanel.tsx
+++ b/react-components/src/components/Architecture/DomainObjectPanel.tsx
@@ -18,6 +18,7 @@ import { CommandButtons } from './Toolbar';
 import { withSuppressRevealEvents } from '../../higher-order-components/withSuppressRevealEvents';
 import { type TranslateDelegate } from '../../architecture/base/utilities/TranslateKey';
 import { type UnitSystem } from '../../architecture/base/renderTarget/UnitSystem';
+import { type DomainObject } from '../../architecture/base/domainObjects/DomainObject';
 
 const TEXT_SIZE = 'x-small';
 const HEADER_SIZE = 'small';
@@ -47,10 +48,8 @@ export const DomainObjectPanel = (): ReactElement => {
     return <></>;
   }
   const unitSystem = root.unitSystem;
-
-  const icon = domainObject.icon as IconType;
+  const icon = getIcon(domainObject);
   const header = info.header;
-
   const commands = domainObject.getPanelToolbar();
 
   // Set in the get string on the copy command if any
@@ -73,9 +72,11 @@ export const DomainObjectPanel = (): ReactElement => {
       <table>
         <tbody>
           <tr>
-            <PaddedTh>
-              <Icon type={icon} />
-            </PaddedTh>
+            {icon !== undefined && (
+              <PaddedTh>
+                <Icon type={icon} />
+              </PaddedTh>
+            )}
             {text !== undefined && (
               <PaddedTh>
                 <Body size={HEADER_SIZE}>{text}</Body>
@@ -132,6 +133,13 @@ function toString(info: PanelInfo, translate: TranslateDelegate, unitSystem: Uni
   return result;
 }
 
+export function getIcon(domainObject: DomainObject): IconType | undefined {
+  if (domainObject.icon === undefined) {
+    return undefined;
+  }
+  return domainObject.icon as IconType;
+}
+
 const NumberTh = styled.th`
   text-align: right;
   padding-right: 8px;
diff --git a/react-components/src/components/Architecture/OptionButton.tsx b/react-components/src/components/Architecture/OptionButton.tsx
new file mode 100644
index 00000000000..63488eb2cdc
--- /dev/null
+++ b/react-components/src/components/Architecture/OptionButton.tsx
@@ -0,0 +1,111 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { useEffect, useMemo, useState, type ReactElement } from 'react';
+import { Button, Dropdown, Menu, Tooltip as CogsTooltip, type IconType } from '@cognite/cogs.js';
+import { useTranslation } from '../i18n/I18n';
+import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
+import { useRenderTarget } from '../RevealCanvas/ViewerContext';
+import { getDefaultCommand } from './CommandButton';
+import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
+import styled from 'styled-components';
+import { getButtonType, getIcon, getTooltipPlacement } from './Utilities';
+
+export const OptionButton = ({
+  command,
+  isHorizontal = false
+}: {
+  command: BaseOptionCommand;
+  isHorizontal: boolean;
+}): ReactElement => {
+  const renderTarget = useRenderTarget();
+  const { t } = useTranslation();
+  const newCommand = useMemo<BaseCommand>(() => getDefaultCommand(command, renderTarget), []);
+
+  const [isOpen, setOpen] = useState<boolean>(false);
+  const [isEnabled, setEnabled] = useState<boolean>(true);
+  const [isVisible, setVisible] = useState<boolean>(true);
+  const [uniqueId, setUniqueId] = useState<number>(0);
+  const [icon, setIcon] = useState<IconType | undefined>(undefined);
+
+  useEffect(() => {
+    function update(command: BaseCommand): void {
+      setEnabled(command.isEnabled);
+      setVisible(command.isVisible);
+      setUniqueId(command.uniqueId);
+      setIcon(getIcon(command));
+    }
+    update(newCommand);
+    newCommand.addEventListener(update);
+    return () => {
+      newCommand.removeEventListener(update);
+    };
+  }, [newCommand]);
+
+  if (!(newCommand instanceof BaseOptionCommand)) {
+    return <></>;
+  }
+  if (!isVisible) {
+    return <></>;
+  }
+  const placement = getTooltipPlacement(isHorizontal);
+  const tooltip = newCommand.getLabel(t);
+  const commands = newCommand.getOptions(renderTarget);
+  const selectedLabel = commands.find((command) => command.isChecked)?.getLabel(t);
+
+  return (
+    <CogsTooltip content={tooltip} placement={placement} appendTo={document.body}>
+      <Dropdown
+        hideOnSelect={true}
+        appendTo={document.body}
+        onClickOutside={() => {
+          setOpen(false);
+        }}
+        content={
+          <StyledMenu>
+            <>
+              {commands.map((command, _index): ReactElement => {
+                return (
+                  <Menu.Item
+                    icon={icon}
+                    key={command.uniqueId}
+                    toggled={command.isChecked}
+                    disabled={!isEnabled}
+                    aria-label={tooltip}
+                    iconPlacement="right"
+                    onClick={() => {
+                      command.invoke();
+                      setOpen(false);
+                    }}>
+                    {command.getLabel(t)}
+                  </Menu.Item>
+                );
+              })}
+            </>
+          </StyledMenu>
+        }
+        placement="right-start">
+        <Button
+          style={{ padding: '8px 4px' }}
+          type={getButtonType(newCommand)}
+          icon={isOpen ? 'ChevronUp' : 'ChevronDown'}
+          key={uniqueId}
+          disabled={!isEnabled}
+          toggled={isOpen}
+          aria-label={tooltip}
+          iconPlacement="right"
+          onClick={() => {
+            setOpen((prevState) => !prevState);
+          }}>
+          {selectedLabel}
+        </Button>
+      </Dropdown>
+    </CogsTooltip>
+  );
+};
+
+const StyledMenu = styled(Menu)`
+  min-width: 0px;
+  overflow: auto;
+`;
diff --git a/react-components/src/components/Architecture/Utilities.tsx b/react-components/src/components/Architecture/Utilities.tsx
new file mode 100644
index 00000000000..3c1f8ed0b83
--- /dev/null
+++ b/react-components/src/components/Architecture/Utilities.tsx
@@ -0,0 +1,47 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
+import { type RevealRenderTarget } from '../../architecture/base/renderTarget/RevealRenderTarget';
+import { RenderTargetCommand } from '../../architecture/base/commands/RenderTargetCommand';
+import { type IconType } from '@cognite/cogs.js';
+
+export function getIcon(command: BaseCommand): IconType | undefined {
+  if (command.icon === undefined) {
+    return undefined;
+  }
+  return command.icon as IconType;
+}
+
+export function getTooltipPlacement(isHorizontal: boolean): 'top' | 'right' {
+  return isHorizontal ? 'top' : 'right';
+}
+
+export function getButtonType(command: BaseCommand): 'ghost' | 'ghost-destructive' | 'primary' {
+  // This was the only way it went through compiler: (more button types will be added in the future)
+  const type = command.buttonType;
+  if (type === 'ghost' || type === 'ghost-destructive' || type === 'primary') {
+    return type;
+  }
+  return 'ghost';
+}
+
+export function getDefaultCommand(
+  newCommand: BaseCommand,
+  renderTarget: RevealRenderTarget
+): BaseCommand {
+  // If it exists from before, return the existing command
+  // Otherwise, add the new command to the controller and attach the renderTarget.
+  if (!newCommand.hasData) {
+    const oldCommand = renderTarget.commandsController.getEqual(newCommand);
+    if (oldCommand !== undefined) {
+      return oldCommand;
+    }
+    renderTarget.commandsController.add(newCommand);
+  }
+  if (newCommand instanceof RenderTargetCommand) {
+    newCommand.attach(renderTarget);
+  }
+  return newCommand;
+}

From ccbcb42868d971dc9fc30255d1e2f6d4d06fd909 Mon Sep 17 00:00:00 2001
From: Nils Petter Fremming <nils.fremming@cognite.com>
Date: Wed, 19 Jun 2024 15:39:04 +0200
Subject: [PATCH 02/10] Fixing labels

---
 .../base/concreteCommands/SetSpeedOptionCommand.ts            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/react-components/src/architecture/base/concreteCommands/SetSpeedOptionCommand.ts b/react-components/src/architecture/base/concreteCommands/SetSpeedOptionCommand.ts
index 3c81e8e1f9b..376fe4051bb 100644
--- a/react-components/src/architecture/base/concreteCommands/SetSpeedOptionCommand.ts
+++ b/react-components/src/architecture/base/concreteCommands/SetSpeedOptionCommand.ts
@@ -13,7 +13,7 @@ export class SetSpeedOptionCommand extends BaseOptionCommand {
   // ==================================================
 
   public override get tooltip(): TranslateKey {
-    return { key: 'SPEED', fallback: 'Speed' };
+    return { key: 'FLY_SPEED', fallback: 'Set camera fly speed' };
   }
 
   public override createOptions(): BaseCommand[] {
@@ -31,7 +31,7 @@ class SpeedCommand extends RenderTargetCommand {
   }
 
   public override get tooltip(): TranslateKey {
-    return { fallback: 'x' + this._value.toString() };
+    return { fallback: this._value.toString() + 'x' };
   }
 
   public override get isChecked(): boolean {

From 9426e0c17b6f0c686bcb34c2e9c9618d3dd54f73 Mon Sep 17 00:00:00 2001
From: Nils Petter Fremming <nils.fremming@cognite.com>
Date: Wed, 19 Jun 2024 16:09:39 +0200
Subject: [PATCH 03/10] Update SetSpeedOptionCommand.ts

---
 .../concreteCommands/SetSpeedOptionCommand.ts     | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/react-components/src/architecture/base/concreteCommands/SetSpeedOptionCommand.ts b/react-components/src/architecture/base/concreteCommands/SetSpeedOptionCommand.ts
index 376fe4051bb..7bef811133e 100644
--- a/react-components/src/architecture/base/concreteCommands/SetSpeedOptionCommand.ts
+++ b/react-components/src/architecture/base/concreteCommands/SetSpeedOptionCommand.ts
@@ -7,17 +7,23 @@ import { BaseOptionCommand } from '../commands/BaseOptionCommand';
 import { RenderTargetCommand } from '../commands/RenderTargetCommand';
 import { type TranslateKey } from '../utilities/TranslateKey';
 
+const KEYBOARD_SPEED_VALUES = [0.5, 1, 2, 5, 10, 20];
+
 export class SetSpeedOptionCommand extends BaseOptionCommand {
   // ==================================================
   // OVERRIDES
   // ==================================================
 
   public override get tooltip(): TranslateKey {
-    return { key: 'FLY_SPEED', fallback: 'Set camera fly speed' };
+    return { key: 'FLY_SPEED', fallback: 'Set fly speed on the camera' };
   }
 
   public override createOptions(): BaseCommand[] {
-    return [new SpeedCommand(1), new SpeedCommand(2), new SpeedCommand(4)];
+    const options: BaseCommand[] = [];
+    for (const value of KEYBOARD_SPEED_VALUES) {
+      options.push(new SpeedCommand(value));
+    }
+    return options;
   }
 }
 
@@ -35,12 +41,11 @@ class SpeedCommand extends RenderTargetCommand {
   }
 
   public override get isChecked(): boolean {
-    return this._value === SpeedCommand.currentSpeed;
+    return this._value === this.renderTarget.flexibleCameraManager.options.keyboardSpeed;
   }
 
   public override invokeCore(): boolean {
-    // this.renderTarget.flexibleCameraManager;
-    SpeedCommand.currentSpeed = this._value;
+    this.renderTarget.flexibleCameraManager.options.keyboardSpeed = this._value;
     return true;
   }
 }

From 80bebbd95125a6ef3ad353c9fa745c48dc677673 Mon Sep 17 00:00:00 2001
From: Nils Petter Fremming <nils.fremming@cognite.com>
Date: Wed, 19 Jun 2024 16:20:03 +0200
Subject: [PATCH 04/10] Polishing

---
 ...SetSpeedOptionCommand.ts => SetKeyboardSpeedCommand.ts} | 7 ++++---
 .../src/architecture/concrete/config/StoryBookConfig.ts    | 2 +-
 .../src/components/Architecture/RevealButtons.tsx          | 2 ++
 3 files changed, 7 insertions(+), 4 deletions(-)
 rename react-components/src/architecture/base/concreteCommands/{SetSpeedOptionCommand.ts => SetKeyboardSpeedCommand.ts} (85%)

diff --git a/react-components/src/architecture/base/concreteCommands/SetSpeedOptionCommand.ts b/react-components/src/architecture/base/concreteCommands/SetKeyboardSpeedCommand.ts
similarity index 85%
rename from react-components/src/architecture/base/concreteCommands/SetSpeedOptionCommand.ts
rename to react-components/src/architecture/base/concreteCommands/SetKeyboardSpeedCommand.ts
index 7bef811133e..399efb07b05 100644
--- a/react-components/src/architecture/base/concreteCommands/SetSpeedOptionCommand.ts
+++ b/react-components/src/architecture/base/concreteCommands/SetKeyboardSpeedCommand.ts
@@ -9,7 +9,7 @@ import { type TranslateKey } from '../utilities/TranslateKey';
 
 const KEYBOARD_SPEED_VALUES = [0.5, 1, 2, 5, 10, 20];
 
-export class SetSpeedOptionCommand extends BaseOptionCommand {
+export class SetKeyboardSpeedCommand extends BaseOptionCommand {
   // ==================================================
   // OVERRIDES
   // ==================================================
@@ -21,13 +21,14 @@ export class SetSpeedOptionCommand extends BaseOptionCommand {
   public override createOptions(): BaseCommand[] {
     const options: BaseCommand[] = [];
     for (const value of KEYBOARD_SPEED_VALUES) {
-      options.push(new SpeedCommand(value));
+      options.push(new OptionCommand(value));
     }
     return options;
   }
 }
 
-class SpeedCommand extends RenderTargetCommand {
+// Note: This is not exported, as it is only used internally
+class OptionCommand extends RenderTargetCommand {
   static currentSpeed: number = 1;
   private readonly _value;
 
diff --git a/react-components/src/architecture/concrete/config/StoryBookConfig.ts b/react-components/src/architecture/concrete/config/StoryBookConfig.ts
index bd2685a53c8..506b9a5bf5c 100644
--- a/react-components/src/architecture/concrete/config/StoryBookConfig.ts
+++ b/react-components/src/architecture/concrete/config/StoryBookConfig.ts
@@ -19,7 +19,7 @@ import { type BaseTool } from '../../base/commands/BaseTool';
 import { ToggleMetricUnitsCommand } from '../../base/concreteCommands/ToggleMetricUnitsCommand';
 import { MeasurementTool } from '../measurements/MeasurementTool';
 import { ClipTool } from '../clipping/ClipTool';
-import { SetSpeedOptionCommand } from '../../base/concreteCommands/SetSpeedOptionCommand';
+import { SetSpeedOptionCommand } from '../../base/concreteCommands/SetKeyboardSpeedCommand';
 
 export class StoryBookConfig extends BaseRevealConfig {
   // ==================================================
diff --git a/react-components/src/components/Architecture/RevealButtons.tsx b/react-components/src/components/Architecture/RevealButtons.tsx
index 41cab519f34..9696cf68874 100644
--- a/react-components/src/components/Architecture/RevealButtons.tsx
+++ b/react-components/src/components/Architecture/RevealButtons.tsx
@@ -11,6 +11,7 @@ import { SetFlexibleControlsTypeCommand } from '../../architecture/base/concrete
 import { SetAxisVisibleCommand } from '../../architecture/concrete/axis/SetAxisVisibleCommand';
 import { ClipTool } from '../../architecture/concrete/clipping/ClipTool';
 import { MeasurementTool } from '../../architecture/concrete/measurements/MeasurementTool';
+import { SetKeyboardSpeedCommand } from '../../architecture/base/concreteCommands/SetKeyboardSpeedCommand';
 
 export class RevealButtons {
   static FitView = (): ReactElement => CreateCommandButton(new FitViewCommand());
@@ -18,6 +19,7 @@ export class RevealButtons {
   static SetAxisVisible = (): ReactElement => CreateCommandButton(new SetAxisVisibleCommand());
   static Measurement = (): ReactElement => CreateCommandButton(new MeasurementTool());
   static Clip = (): ReactElement => CreateCommandButton(new ClipTool());
+  static SetKeyboardSpeed = (): ReactElement => CreateCommandButton(new SetKeyboardSpeedCommand());
 
   static SetFlexibleControlsTypeOrbit = (): ReactElement =>
     CreateCommandButton(new SetFlexibleControlsTypeCommand(FlexibleControlsType.Orbit));

From 836d8d5cb7910a4a03fdb0382dd39ad7e56abdb5 Mon Sep 17 00:00:00 2001
From: Nils Petter Fremming <nils.fremming@cognite.com>
Date: Wed, 19 Jun 2024 21:06:43 +0200
Subject: [PATCH 05/10] Fixes according to review

---
 react-components/package.json                              | 2 +-
 ...{SetKeyboardSpeedCommand.ts => KeyboardSpeedCommand.ts} | 2 +-
 .../src/architecture/concrete/config/StoryBookConfig.ts    | 4 ++--
 .../src/components/Architecture/CommandButton.tsx          | 4 ++--
 .../src/components/Architecture/OptionButton.tsx           | 4 ++--
 .../src/components/Architecture/RevealButtons.tsx          | 4 ++--
 react-components/src/components/Architecture/types.ts      | 7 +++++++
 .../Architecture/{Utilities.tsx => utilities.ts}           | 5 +++--
 8 files changed, 20 insertions(+), 12 deletions(-)
 rename react-components/src/architecture/base/concreteCommands/{SetKeyboardSpeedCommand.ts => KeyboardSpeedCommand.ts} (95%)
 create mode 100644 react-components/src/components/Architecture/types.ts
 rename react-components/src/components/Architecture/{Utilities.tsx => utilities.ts} (87%)

diff --git a/react-components/package.json b/react-components/package.json
index db524d60fca..bb29d30d363 100644
--- a/react-components/package.json
+++ b/react-components/package.json
@@ -44,7 +44,7 @@
     "@cognite/cdf-i18n-utils": "^0.7.5",
     "@cognite/cdf-utilities": "^3.6.0",
     "@cognite/cogs.js": "^9.84.3",
-    "@cognite/reveal": "^4.14.7",
+    "@cognite/reveal": "file:.yalc/@cognite/reveal",
     "@cognite/sdk": "^9.13.0",
     "@playwright/test": "^1.43.1",
     "@storybook/addon-essentials": "^8.0.9",
diff --git a/react-components/src/architecture/base/concreteCommands/SetKeyboardSpeedCommand.ts b/react-components/src/architecture/base/concreteCommands/KeyboardSpeedCommand.ts
similarity index 95%
rename from react-components/src/architecture/base/concreteCommands/SetKeyboardSpeedCommand.ts
rename to react-components/src/architecture/base/concreteCommands/KeyboardSpeedCommand.ts
index 399efb07b05..e654f94ed0c 100644
--- a/react-components/src/architecture/base/concreteCommands/SetKeyboardSpeedCommand.ts
+++ b/react-components/src/architecture/base/concreteCommands/KeyboardSpeedCommand.ts
@@ -9,7 +9,7 @@ import { type TranslateKey } from '../utilities/TranslateKey';
 
 const KEYBOARD_SPEED_VALUES = [0.5, 1, 2, 5, 10, 20];
 
-export class SetKeyboardSpeedCommand extends BaseOptionCommand {
+export class KeyboardSpeedCommand extends BaseOptionCommand {
   // ==================================================
   // OVERRIDES
   // ==================================================
diff --git a/react-components/src/architecture/concrete/config/StoryBookConfig.ts b/react-components/src/architecture/concrete/config/StoryBookConfig.ts
index 506b9a5bf5c..ae62b078558 100644
--- a/react-components/src/architecture/concrete/config/StoryBookConfig.ts
+++ b/react-components/src/architecture/concrete/config/StoryBookConfig.ts
@@ -19,7 +19,7 @@ import { type BaseTool } from '../../base/commands/BaseTool';
 import { ToggleMetricUnitsCommand } from '../../base/concreteCommands/ToggleMetricUnitsCommand';
 import { MeasurementTool } from '../measurements/MeasurementTool';
 import { ClipTool } from '../clipping/ClipTool';
-import { SetSpeedOptionCommand } from '../../base/concreteCommands/SetKeyboardSpeedCommand';
+import { KeyboardSpeedCommand } from '../../base/concreteCommands/KeyboardSpeedCommand';
 
 export class StoryBookConfig extends BaseRevealConfig {
   // ==================================================
@@ -38,7 +38,7 @@ export class StoryBookConfig extends BaseRevealConfig {
       new FitViewCommand(),
       new SetAxisVisibleCommand(),
       new ToggleMetricUnitsCommand(),
-      new SetSpeedOptionCommand(),
+      new KeyboardSpeedCommand(),
       undefined,
       new ExampleTool(),
       new MeasurementTool(),
diff --git a/react-components/src/components/Architecture/CommandButton.tsx b/react-components/src/components/Architecture/CommandButton.tsx
index 96422486ae1..be623c0731f 100644
--- a/react-components/src/components/Architecture/CommandButton.tsx
+++ b/react-components/src/components/Architecture/CommandButton.tsx
@@ -11,7 +11,7 @@ import { type RevealRenderTarget } from '../../architecture/base/renderTarget/Re
 import { RenderTargetCommand } from '../../architecture/base/commands/RenderTargetCommand';
 import { OptionButton } from './OptionButton';
 import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
-import { getButtonType, getIcon, getTooltipPlacement } from './Utilities';
+import { getButtonType, getIcon, getPlacement } from './utilities';
 
 export const CommandButtons = ({
   commands,
@@ -72,7 +72,7 @@ export const CommandButton = ({
   if (!isVisible) {
     return <></>;
   }
-  const placement = getTooltipPlacement(isHorizontal);
+  const placement = getPlacement(isHorizontal);
   const tooltip = newCommand.getLabel(t);
   return (
     <CogsTooltip content={tooltip} placement={placement} appendTo={document.body}>
diff --git a/react-components/src/components/Architecture/OptionButton.tsx b/react-components/src/components/Architecture/OptionButton.tsx
index 63488eb2cdc..d94ac9df85d 100644
--- a/react-components/src/components/Architecture/OptionButton.tsx
+++ b/react-components/src/components/Architecture/OptionButton.tsx
@@ -10,7 +10,7 @@ import { useRenderTarget } from '../RevealCanvas/ViewerContext';
 import { getDefaultCommand } from './CommandButton';
 import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
 import styled from 'styled-components';
-import { getButtonType, getIcon, getTooltipPlacement } from './Utilities';
+import { getButtonType, getIcon, getPlacement } from './utilities';
 
 export const OptionButton = ({
   command,
@@ -49,7 +49,7 @@ export const OptionButton = ({
   if (!isVisible) {
     return <></>;
   }
-  const placement = getTooltipPlacement(isHorizontal);
+  const placement = getPlacement(isHorizontal);
   const tooltip = newCommand.getLabel(t);
   const commands = newCommand.getOptions(renderTarget);
   const selectedLabel = commands.find((command) => command.isChecked)?.getLabel(t);
diff --git a/react-components/src/components/Architecture/RevealButtons.tsx b/react-components/src/components/Architecture/RevealButtons.tsx
index 9696cf68874..37afe7f6476 100644
--- a/react-components/src/components/Architecture/RevealButtons.tsx
+++ b/react-components/src/components/Architecture/RevealButtons.tsx
@@ -11,7 +11,7 @@ import { SetFlexibleControlsTypeCommand } from '../../architecture/base/concrete
 import { SetAxisVisibleCommand } from '../../architecture/concrete/axis/SetAxisVisibleCommand';
 import { ClipTool } from '../../architecture/concrete/clipping/ClipTool';
 import { MeasurementTool } from '../../architecture/concrete/measurements/MeasurementTool';
-import { SetKeyboardSpeedCommand } from '../../architecture/base/concreteCommands/SetKeyboardSpeedCommand';
+import { KeyboardSpeedCommand } from '../../architecture/base/concreteCommands/KeyboardSpeedCommand';
 
 export class RevealButtons {
   static FitView = (): ReactElement => CreateCommandButton(new FitViewCommand());
@@ -19,7 +19,7 @@ export class RevealButtons {
   static SetAxisVisible = (): ReactElement => CreateCommandButton(new SetAxisVisibleCommand());
   static Measurement = (): ReactElement => CreateCommandButton(new MeasurementTool());
   static Clip = (): ReactElement => CreateCommandButton(new ClipTool());
-  static SetKeyboardSpeed = (): ReactElement => CreateCommandButton(new SetKeyboardSpeedCommand());
+  static KeyboardSpeed = (): ReactElement => CreateCommandButton(new KeyboardSpeedCommand());
 
   static SetFlexibleControlsTypeOrbit = (): ReactElement =>
     CreateCommandButton(new SetFlexibleControlsTypeCommand(FlexibleControlsType.Orbit));
diff --git a/react-components/src/components/Architecture/types.ts b/react-components/src/components/Architecture/types.ts
new file mode 100644
index 00000000000..3be1882857c
--- /dev/null
+++ b/react-components/src/components/Architecture/types.ts
@@ -0,0 +1,7 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+export type ButtonType = 'ghost' | 'ghost-destructive' | 'primary';
+
+export type PlacementType = 'top' | 'right';
diff --git a/react-components/src/components/Architecture/Utilities.tsx b/react-components/src/components/Architecture/utilities.ts
similarity index 87%
rename from react-components/src/components/Architecture/Utilities.tsx
rename to react-components/src/components/Architecture/utilities.ts
index 3c1f8ed0b83..00bc2851a45 100644
--- a/react-components/src/components/Architecture/Utilities.tsx
+++ b/react-components/src/components/Architecture/utilities.ts
@@ -6,6 +6,7 @@ import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import { type RevealRenderTarget } from '../../architecture/base/renderTarget/RevealRenderTarget';
 import { RenderTargetCommand } from '../../architecture/base/commands/RenderTargetCommand';
 import { type IconType } from '@cognite/cogs.js';
+import { type PlacementType, type ButtonType } from './types';
 
 export function getIcon(command: BaseCommand): IconType | undefined {
   if (command.icon === undefined) {
@@ -14,11 +15,11 @@ export function getIcon(command: BaseCommand): IconType | undefined {
   return command.icon as IconType;
 }
 
-export function getTooltipPlacement(isHorizontal: boolean): 'top' | 'right' {
+export function getPlacement(isHorizontal: boolean): PlacementType {
   return isHorizontal ? 'top' : 'right';
 }
 
-export function getButtonType(command: BaseCommand): 'ghost' | 'ghost-destructive' | 'primary' {
+export function getButtonType(command: BaseCommand): ButtonType {
   // This was the only way it went through compiler: (more button types will be added in the future)
   const type = command.buttonType;
   if (type === 'ghost' || type === 'ghost-destructive' || type === 'primary') {

From 84488f5c37bf97632d843fe36a803770165b17b6 Mon Sep 17 00:00:00 2001
From: Nils Petter Fremming <nils.fremming@cognite.com>
Date: Wed, 19 Jun 2024 21:08:05 +0200
Subject: [PATCH 06/10] Update package.json

---
 react-components/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react-components/package.json b/react-components/package.json
index bb29d30d363..db524d60fca 100644
--- a/react-components/package.json
+++ b/react-components/package.json
@@ -44,7 +44,7 @@
     "@cognite/cdf-i18n-utils": "^0.7.5",
     "@cognite/cdf-utilities": "^3.6.0",
     "@cognite/cogs.js": "^9.84.3",
-    "@cognite/reveal": "file:.yalc/@cognite/reveal",
+    "@cognite/reveal": "^4.14.7",
     "@cognite/sdk": "^9.13.0",
     "@playwright/test": "^1.43.1",
     "@storybook/addon-essentials": "^8.0.9",

From 64c23f85b00f2b518dcb6ba058d9508751db27c0 Mon Sep 17 00:00:00 2001
From: Nils Petter Fremming <nils.fremming@cognite.com>
Date: Wed, 19 Jun 2024 21:36:03 +0200
Subject: [PATCH 07/10] Renaming + simplify

---
 .../components/Architecture/CommandButton.tsx  |  7 ++-----
 .../components/Architecture/RevealButtons.tsx  | 18 +++++++++---------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/react-components/src/components/Architecture/CommandButton.tsx b/react-components/src/components/Architecture/CommandButton.tsx
index be623c0731f..9f4ad0fc987 100644
--- a/react-components/src/components/Architecture/CommandButton.tsx
+++ b/react-components/src/components/Architecture/CommandButton.tsx
@@ -29,7 +29,7 @@ export const CommandButtons = ({
   );
 };
 
-export const CreateCommandButton = (command: BaseCommand, isHorizontal = false): ReactElement => {
+export const CreateButton = (command: BaseCommand, isHorizontal = false): ReactElement => {
   if (command instanceof BaseOptionCommand) {
     return <OptionButton command={command} isHorizontal={isHorizontal} />;
   } else {
@@ -120,8 +120,5 @@ function addCommandButton(
     const direction = !isHorizontal ? 'horizontal' : 'vertical';
     return <Divider key={index} weight="2px" length="24px" direction={direction} />;
   }
-  if (command instanceof BaseOptionCommand)
-    return <OptionButton key={command.uniqueId} command={command} isHorizontal={isHorizontal} />;
-  else
-    return <CommandButton key={command.uniqueId} command={command} isHorizontal={isHorizontal} />;
+  return CreateButton(command);
 }
diff --git a/react-components/src/components/Architecture/RevealButtons.tsx b/react-components/src/components/Architecture/RevealButtons.tsx
index 37afe7f6476..ad006f97ee8 100644
--- a/react-components/src/components/Architecture/RevealButtons.tsx
+++ b/react-components/src/components/Architecture/RevealButtons.tsx
@@ -4,7 +4,7 @@
 
 import { type ReactElement } from 'react';
 import { NavigationTool } from '../../architecture/base/concreteCommands/NavigationTool';
-import { CreateCommandButton } from './CommandButton';
+import { CreateButton } from './CommandButton';
 import { FitViewCommand } from '../../architecture/base/concreteCommands/FitViewCommand';
 import { FlexibleControlsType } from '@cognite/reveal';
 import { SetFlexibleControlsTypeCommand } from '../../architecture/base/concreteCommands/SetFlexibleControlsTypeCommand';
@@ -14,16 +14,16 @@ import { MeasurementTool } from '../../architecture/concrete/measurements/Measur
 import { KeyboardSpeedCommand } from '../../architecture/base/concreteCommands/KeyboardSpeedCommand';
 
 export class RevealButtons {
-  static FitView = (): ReactElement => CreateCommandButton(new FitViewCommand());
-  static NavigationTool = (): ReactElement => CreateCommandButton(new NavigationTool());
-  static SetAxisVisible = (): ReactElement => CreateCommandButton(new SetAxisVisibleCommand());
-  static Measurement = (): ReactElement => CreateCommandButton(new MeasurementTool());
-  static Clip = (): ReactElement => CreateCommandButton(new ClipTool());
-  static KeyboardSpeed = (): ReactElement => CreateCommandButton(new KeyboardSpeedCommand());
+  static FitView = (): ReactElement => CreateButton(new FitViewCommand());
+  static NavigationTool = (): ReactElement => CreateButton(new NavigationTool());
+  static SetAxisVisible = (): ReactElement => CreateButton(new SetAxisVisibleCommand());
+  static Measurement = (): ReactElement => CreateButton(new MeasurementTool());
+  static Clip = (): ReactElement => CreateButton(new ClipTool());
+  static KeyboardSpeed = (): ReactElement => CreateButton(new KeyboardSpeedCommand());
 
   static SetFlexibleControlsTypeOrbit = (): ReactElement =>
-    CreateCommandButton(new SetFlexibleControlsTypeCommand(FlexibleControlsType.Orbit));
+    CreateButton(new SetFlexibleControlsTypeCommand(FlexibleControlsType.Orbit));
 
   static SetFlexibleControlsTypeFirstPerson = (): ReactElement =>
-    CreateCommandButton(new SetFlexibleControlsTypeCommand(FlexibleControlsType.FirstPerson));
+    CreateButton(new SetFlexibleControlsTypeCommand(FlexibleControlsType.FirstPerson));
 }

From f07c99e65b94373494bc7648aaee61c9b7897e92 Mon Sep 17 00:00:00 2001
From: Nils Petter Fremming <nils.fremming@cognite.com>
Date: Mon, 24 Jun 2024 08:58:52 +0200
Subject: [PATCH 08/10] Upgrade

---
 react-components/package.json                 |  4 ++--
 .../components/Architecture/CommandButton.tsx | 23 +------------------
 .../components/Architecture/OptionButton.tsx  |  3 +--
 react-components/yarn.lock                    | 12 +++++-----
 4 files changed, 10 insertions(+), 32 deletions(-)

diff --git a/react-components/package.json b/react-components/package.json
index 3b15d39c271..29b0b98a2fe 100644
--- a/react-components/package.json
+++ b/react-components/package.json
@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@cognite/cogs.js": ">=9.84.3",
-    "@cognite/reveal": "4.14.7",
+    "@cognite/reveal": "4.15.0",
     "react": ">=18",
     "react-dom": ">=18",
     "styled-components": ">=5"
@@ -44,7 +44,7 @@
     "@cognite/cdf-i18n-utils": "^0.7.5",
     "@cognite/cdf-utilities": "^3.6.0",
     "@cognite/cogs.js": "^9.84.3",
-    "@cognite/reveal": "^4.14.7",
+    "@cognite/reveal": "^4.15.0",
     "@cognite/sdk": "^9.13.0",
     "@playwright/test": "^1.43.1",
     "@storybook/addon-essentials": "^8.0.9",
diff --git a/react-components/src/components/Architecture/CommandButton.tsx b/react-components/src/components/Architecture/CommandButton.tsx
index f944550ca2c..e14bef9e27b 100644
--- a/react-components/src/components/Architecture/CommandButton.tsx
+++ b/react-components/src/components/Architecture/CommandButton.tsx
@@ -7,11 +7,9 @@ import { useRenderTarget } from '../RevealCanvas/ViewerContext';
 import { Button, Tooltip as CogsTooltip, Divider, type IconType } from '@cognite/cogs.js';
 import { useTranslation } from '../i18n/I18n';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
-import { type RevealRenderTarget } from '../../architecture/base/renderTarget/RevealRenderTarget';
-import { RenderTargetCommand } from '../../architecture/base/commands/RenderTargetCommand';
 import { OptionButton } from './OptionButton';
 import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
-import { getButtonType, getIcon, getPlacement } from './utilities';
+import { getButtonType, getDefaultCommand, getIcon, getPlacement } from './utilities';
 
 export const CommandButtons = ({
   commands,
@@ -98,25 +96,6 @@ export const CommandButton = ({
   );
 };
 
-export function getDefaultCommand(
-  newCommand: BaseCommand,
-  renderTarget: RevealRenderTarget
-): BaseCommand {
-  // If it exists from before, return the existing command
-  // Otherwise, add the new command to the controller and attach the renderTarget.
-  if (!newCommand.hasData) {
-    const oldCommand = renderTarget.commandsController.getEqual(newCommand);
-    if (oldCommand !== undefined) {
-      return oldCommand;
-    }
-    renderTarget.commandsController.add(newCommand);
-  }
-  if (newCommand instanceof RenderTargetCommand) {
-    newCommand.attach(renderTarget);
-  }
-  return newCommand;
-}
-
 function getKey(command: BaseCommand | undefined, index: number): number {
   if (command === undefined) {
     return -index;
diff --git a/react-components/src/components/Architecture/OptionButton.tsx b/react-components/src/components/Architecture/OptionButton.tsx
index d94ac9df85d..20b0509a7f7 100644
--- a/react-components/src/components/Architecture/OptionButton.tsx
+++ b/react-components/src/components/Architecture/OptionButton.tsx
@@ -7,10 +7,9 @@ import { Button, Dropdown, Menu, Tooltip as CogsTooltip, type IconType } from '@
 import { useTranslation } from '../i18n/I18n';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import { useRenderTarget } from '../RevealCanvas/ViewerContext';
-import { getDefaultCommand } from './CommandButton';
 import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
 import styled from 'styled-components';
-import { getButtonType, getIcon, getPlacement } from './utilities';
+import { getButtonType, getDefaultCommand, getIcon, getPlacement } from './utilities';
 
 export const OptionButton = ({
   command,
diff --git a/react-components/yarn.lock b/react-components/yarn.lock
index 34793dfc8a6..436424e13c0 100644
--- a/react-components/yarn.lock
+++ b/react-components/yarn.lock
@@ -1747,7 +1747,7 @@ __metadata:
     "@cognite/cdf-i18n-utils": "npm:^0.7.5"
     "@cognite/cdf-utilities": "npm:^3.6.0"
     "@cognite/cogs.js": "npm:^9.84.3"
-    "@cognite/reveal": "npm:^4.14.7"
+    "@cognite/reveal": "npm:^4.15.0"
     "@cognite/sdk": "npm:^9.13.0"
     "@playwright/test": "npm:^1.43.1"
     "@storybook/addon-essentials": "npm:^8.0.9"
@@ -1802,16 +1802,16 @@ __metadata:
     vitest: "npm:^1.5.3"
   peerDependencies:
     "@cognite/cogs.js": ">=9.84.3"
-    "@cognite/reveal": 4.14.7
+    "@cognite/reveal": 4.15.0
     react: ">=18"
     react-dom: ">=18"
     styled-components: ">=5"
   languageName: unknown
   linkType: soft
 
-"@cognite/reveal@npm:^4.14.7":
-  version: 4.14.7
-  resolution: "@cognite/reveal@npm:4.14.7"
+"@cognite/reveal@npm:^4.15.0":
+  version: 4.15.0
+  resolution: "@cognite/reveal@npm:4.15.0"
   dependencies:
     "@rajesh896/broprint.js": "npm:^2.1.1"
     "@tweenjs/tween.js": "npm:^23.1.1"
@@ -1831,7 +1831,7 @@ __metadata:
   peerDependencies:
     "@cognite/sdk": ^7.16.0 || ^8.0.0
     three: 0.165.0
-  checksum: 10/095b8d02ec9a66dc3f28974f95fcac959b854b0504774b1c3b4bc837e66026aa5d58d01c0f9adb7cc8a09e389c05d9091226f9b2533dc97e513e3fb5143cbb34
+  checksum: 10/5d8111cf3cc5a2424a643fd0d743764a90b56ffb7602fccc3dc07aace1f9857eb514abe765a6fc2cd6ba8fdbe069dea22a1ba46a00526b6800bf8f947f64f3b0
   languageName: node
   linkType: hard
 

From 252a1a72af7e7d803f8e63103b410abae5be6e92 Mon Sep 17 00:00:00 2001
From: Nils Petter Fremming <nils.fremming@cognite.com>
Date: Mon, 24 Jun 2024 09:14:48 +0200
Subject: [PATCH 09/10] Smaller fixes

---
 .../base/commands/BaseOptionCommand.ts        |  9 +-
 .../concreteCommands/KeyboardSpeedCommand.ts  |  3 +-
 .../components/Architecture/CommandButton.tsx | 28 +++---
 .../components/Architecture/OptionButton.tsx  | 88 ++++++++++---------
 .../src/components/Architecture/types.ts      |  2 +
 .../src/components/Architecture/utilities.ts  |  8 +-
 6 files changed, 77 insertions(+), 61 deletions(-)

diff --git a/react-components/src/architecture/base/commands/BaseOptionCommand.ts b/react-components/src/architecture/base/commands/BaseOptionCommand.ts
index 4321a51a1eb..7aaed2c49c7 100644
--- a/react-components/src/architecture/base/commands/BaseOptionCommand.ts
+++ b/react-components/src/architecture/base/commands/BaseOptionCommand.ts
@@ -27,7 +27,7 @@ export abstract class BaseOptionCommand extends BaseCommand {
   // INSTANCE METHODS
   // ==================================================
 
-  public getOptions(renderTarget: RevealRenderTarget): BaseCommand[] {
+  public getOrCreateOptions(renderTarget: RevealRenderTarget): BaseCommand[] {
     if (this._options === undefined) {
       this._options = this.createOptions();
       for (const option of this._options) {
@@ -38,4 +38,11 @@ export abstract class BaseOptionCommand extends BaseCommand {
     }
     return this._options;
   }
+
+  public get selectedOption(): BaseCommand | undefined {
+    if (this._options === undefined) {
+      return undefined;
+    }
+    return this._options.find((option) => option.isChecked);
+  }
 }
diff --git a/react-components/src/architecture/base/concreteCommands/KeyboardSpeedCommand.ts b/react-components/src/architecture/base/concreteCommands/KeyboardSpeedCommand.ts
index e654f94ed0c..88915de486d 100644
--- a/react-components/src/architecture/base/concreteCommands/KeyboardSpeedCommand.ts
+++ b/react-components/src/architecture/base/concreteCommands/KeyboardSpeedCommand.ts
@@ -29,7 +29,6 @@ export class KeyboardSpeedCommand extends BaseOptionCommand {
 
 // Note: This is not exported, as it is only used internally
 class OptionCommand extends RenderTargetCommand {
-  static currentSpeed: number = 1;
   private readonly _value;
 
   public constructor(value: number) {
@@ -38,7 +37,7 @@ class OptionCommand extends RenderTargetCommand {
   }
 
   public override get tooltip(): TranslateKey {
-    return { fallback: this._value.toString() + 'x' };
+    return { fallback: `${this._value.toString()}x` };
   }
 
   public override get isChecked(): boolean {
diff --git a/react-components/src/components/Architecture/CommandButton.tsx b/react-components/src/components/Architecture/CommandButton.tsx
index e14bef9e27b..33fbda2b098 100644
--- a/react-components/src/components/Architecture/CommandButton.tsx
+++ b/react-components/src/components/Architecture/CommandButton.tsx
@@ -9,7 +9,7 @@ import { useTranslation } from '../i18n/I18n';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import { OptionButton } from './OptionButton';
 import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
-import { getButtonType, getDefaultCommand, getIcon, getPlacement } from './utilities';
+import { getButtonType, getDefaultCommand, getIcon, getTooltipPlacement } from './utilities';
 
 export const CommandButtons = ({
   commands,
@@ -35,22 +35,22 @@ export const CommandButtons = ({
 
 export const CreateButton = (command: BaseCommand, isHorizontal = false): ReactElement => {
   if (command instanceof BaseOptionCommand) {
-    return <OptionButton command={command} isHorizontal={isHorizontal} />;
+    return <OptionButton inputCommand={command} isHorizontal={isHorizontal} />;
   } else {
-    return <CommandButton command={command} isHorizontal={isHorizontal} />;
+    return <CommandButton inputCommand={command} isHorizontal={isHorizontal} />;
   }
 };
 
 export const CommandButton = ({
-  command,
+  inputCommand,
   isHorizontal = false
 }: {
-  command: BaseCommand;
+  inputCommand: BaseCommand;
   isHorizontal: boolean;
 }): ReactElement => {
   const renderTarget = useRenderTarget();
   const { t } = useTranslation();
-  const newCommand = useMemo<BaseCommand>(() => getDefaultCommand(command, renderTarget), []);
+  const command = useMemo<BaseCommand>(() => getDefaultCommand(inputCommand, renderTarget), []);
 
   const [isChecked, setChecked] = useState<boolean>(false);
   const [isEnabled, setEnabled] = useState<boolean>(true);
@@ -66,22 +66,22 @@ export const CommandButton = ({
       setUniqueId(command.uniqueId);
       setIcon(getIcon(command));
     }
-    update(newCommand);
-    newCommand.addEventListener(update);
+    update(command);
+    command.addEventListener(update);
     return () => {
-      newCommand.removeEventListener(update);
+      command.removeEventListener(update);
     };
-  }, [newCommand.isEnabled, newCommand.isChecked, newCommand.isVisible]);
+  }, [command.isEnabled, command.isChecked, command.isVisible]);
 
   if (!isVisible) {
     return <></>;
   }
-  const placement = getPlacement(isHorizontal);
-  const tooltip = newCommand.getLabel(t);
+  const placement = getTooltipPlacement(isHorizontal);
+  const tooltip = command.getLabel(t);
   return (
     <CogsTooltip content={tooltip} placement={placement} appendTo={document.body}>
       <Button
-        type={getButtonType(newCommand)}
+        type={getButtonType(command)}
         icon={icon}
         key={uniqueId}
         disabled={!isEnabled}
@@ -89,7 +89,7 @@ export const CommandButton = ({
         aria-label={tooltip}
         iconPlacement="right"
         onClick={() => {
-          newCommand.invoke();
+          command.invoke();
         }}
       />
     </CogsTooltip>
diff --git a/react-components/src/components/Architecture/OptionButton.tsx b/react-components/src/components/Architecture/OptionButton.tsx
index 20b0509a7f7..d7d1030d1c5 100644
--- a/react-components/src/components/Architecture/OptionButton.tsx
+++ b/react-components/src/components/Architecture/OptionButton.tsx
@@ -8,19 +8,24 @@ import { useTranslation } from '../i18n/I18n';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import { useRenderTarget } from '../RevealCanvas/ViewerContext';
 import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
-import styled from 'styled-components';
-import { getButtonType, getDefaultCommand, getIcon, getPlacement } from './utilities';
+import {
+  getButtonType,
+  getDefaultCommand,
+  getFlexDirection,
+  getIcon,
+  getTooltipPlacement
+} from './utilities';
 
 export const OptionButton = ({
-  command,
+  inputCommand,
   isHorizontal = false
 }: {
-  command: BaseOptionCommand;
+  inputCommand: BaseOptionCommand;
   isHorizontal: boolean;
 }): ReactElement => {
   const renderTarget = useRenderTarget();
   const { t } = useTranslation();
-  const newCommand = useMemo<BaseCommand>(() => getDefaultCommand(command, renderTarget), []);
+  const command = useMemo<BaseCommand>(() => getDefaultCommand(inputCommand, renderTarget), []);
 
   const [isOpen, setOpen] = useState<boolean>(false);
   const [isEnabled, setEnabled] = useState<boolean>(true);
@@ -35,23 +40,24 @@ export const OptionButton = ({
       setUniqueId(command.uniqueId);
       setIcon(getIcon(command));
     }
-    update(newCommand);
-    newCommand.addEventListener(update);
+    update(command);
+    command.addEventListener(update);
     return () => {
-      newCommand.removeEventListener(update);
+      command.removeEventListener(update);
     };
-  }, [newCommand]);
+  }, [command]);
 
-  if (!(newCommand instanceof BaseOptionCommand)) {
+  if (!(command instanceof BaseOptionCommand)) {
     return <></>;
   }
   if (!isVisible) {
     return <></>;
   }
-  const placement = getPlacement(isHorizontal);
-  const tooltip = newCommand.getLabel(t);
-  const commands = newCommand.getOptions(renderTarget);
-  const selectedLabel = commands.find((command) => command.isChecked)?.getLabel(t);
+  const placement = getTooltipPlacement(isHorizontal);
+  const flexDirection = getFlexDirection(isHorizontal);
+  const tooltip = command.getLabel(t);
+  const options = command.getOrCreateOptions(renderTarget);
+  const selectedLabel = command.selectedOption?.getLabel(t);
 
   return (
     <CogsTooltip content={tooltip} placement={placement} appendTo={document.body}>
@@ -62,32 +68,35 @@ export const OptionButton = ({
           setOpen(false);
         }}
         content={
-          <StyledMenu>
-            <>
-              {commands.map((command, _index): ReactElement => {
-                return (
-                  <Menu.Item
-                    icon={icon}
-                    key={command.uniqueId}
-                    toggled={command.isChecked}
-                    disabled={!isEnabled}
-                    aria-label={tooltip}
-                    iconPlacement="right"
-                    onClick={() => {
-                      command.invoke();
-                      setOpen(false);
-                    }}>
-                    {command.getLabel(t)}
-                  </Menu.Item>
-                );
-              })}
-            </>
-          </StyledMenu>
+          <Menu
+            style={{
+              minWidth: '0px',
+              overflow: 'auto',
+              flexDirection
+            }}>
+            {options.map((command, _index): ReactElement => {
+              return (
+                <Menu.Item
+                  icon={icon}
+                  key={command.uniqueId}
+                  toggled={command.isChecked}
+                  disabled={!isEnabled}
+                  aria-label={tooltip}
+                  iconPlacement="right"
+                  onClick={() => {
+                    command.invoke();
+                    setOpen(false);
+                  }}>
+                  {command.getLabel(t)}
+                </Menu.Item>
+              );
+            })}
+          </Menu>
         }
-        placement="right-start">
+        placement="auto-start">
         <Button
           style={{ padding: '8px 4px' }}
-          type={getButtonType(newCommand)}
+          type={getButtonType(command)}
           icon={isOpen ? 'ChevronUp' : 'ChevronDown'}
           key={uniqueId}
           disabled={!isEnabled}
@@ -103,8 +112,3 @@ export const OptionButton = ({
     </CogsTooltip>
   );
 };
-
-const StyledMenu = styled(Menu)`
-  min-width: 0px;
-  overflow: auto;
-`;
diff --git a/react-components/src/components/Architecture/types.ts b/react-components/src/components/Architecture/types.ts
index 3be1882857c..378c56cea70 100644
--- a/react-components/src/components/Architecture/types.ts
+++ b/react-components/src/components/Architecture/types.ts
@@ -5,3 +5,5 @@
 export type ButtonType = 'ghost' | 'ghost-destructive' | 'primary';
 
 export type PlacementType = 'top' | 'right';
+
+export type FlexDirection = 'row' | 'column';
diff --git a/react-components/src/components/Architecture/utilities.ts b/react-components/src/components/Architecture/utilities.ts
index 00bc2851a45..4282288ef9a 100644
--- a/react-components/src/components/Architecture/utilities.ts
+++ b/react-components/src/components/Architecture/utilities.ts
@@ -6,7 +6,7 @@ import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import { type RevealRenderTarget } from '../../architecture/base/renderTarget/RevealRenderTarget';
 import { RenderTargetCommand } from '../../architecture/base/commands/RenderTargetCommand';
 import { type IconType } from '@cognite/cogs.js';
-import { type PlacementType, type ButtonType } from './types';
+import { type PlacementType, type ButtonType, type FlexDirection } from './types';
 
 export function getIcon(command: BaseCommand): IconType | undefined {
   if (command.icon === undefined) {
@@ -15,7 +15,11 @@ export function getIcon(command: BaseCommand): IconType | undefined {
   return command.icon as IconType;
 }
 
-export function getPlacement(isHorizontal: boolean): PlacementType {
+export function getFlexDirection(isHorizontal: boolean): FlexDirection {
+  return isHorizontal ? 'row' : 'column';
+}
+
+export function getTooltipPlacement(isHorizontal: boolean): PlacementType {
   return isHorizontal ? 'top' : 'right';
 }
 

From a8c44d8764484f519ecc581509c579652790165f Mon Sep 17 00:00:00 2001
From: Nils Petter Fremming <nils.fremming@cognite.com>
Date: Mon, 24 Jun 2024 15:14:09 +0200
Subject: [PATCH 10/10] Fix code according to review

---
 .../components/Architecture/CommandButton.tsx | 73 +++----------------
 .../Architecture/CommandButtons.tsx           | 61 ++++++++++++++++
 .../components/Architecture/OptionButton.tsx  | 15 ++--
 .../components/Architecture/RevealButtons.tsx |  2 +-
 .../src/components/Architecture/Toolbar.tsx   |  2 +-
 5 files changed, 81 insertions(+), 72 deletions(-)
 create mode 100644 react-components/src/components/Architecture/CommandButtons.tsx

diff --git a/react-components/src/components/Architecture/CommandButton.tsx b/react-components/src/components/Architecture/CommandButton.tsx
index 33fbda2b098..089da5315fc 100644
--- a/react-components/src/components/Architecture/CommandButton.tsx
+++ b/react-components/src/components/Architecture/CommandButton.tsx
@@ -2,45 +2,13 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type ReactElement, useState, useEffect, useMemo } from 'react';
+import { type ReactElement, useState, useEffect, useMemo, useCallback } from 'react';
 import { useRenderTarget } from '../RevealCanvas/ViewerContext';
-import { Button, Tooltip as CogsTooltip, Divider, type IconType } from '@cognite/cogs.js';
+import { Button, Tooltip as CogsTooltip, type IconType } from '@cognite/cogs.js';
 import { useTranslation } from '../i18n/I18n';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
-import { OptionButton } from './OptionButton';
-import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
 import { getButtonType, getDefaultCommand, getIcon, getTooltipPlacement } from './utilities';
 
-export const CommandButtons = ({
-  commands,
-  isHorizontal = false
-}: {
-  commands: Array<BaseCommand | undefined>;
-  isHorizontal: boolean;
-}): ReactElement => {
-  return (
-    <>
-      {commands.map(
-        (command, index): ReactElement => (
-          <CommandButtonWrapper
-            command={command}
-            isHorizontal={isHorizontal}
-            key={getKey(command, index)}
-          />
-        )
-      )}
-    </>
-  );
-};
-
-export const CreateButton = (command: BaseCommand, isHorizontal = false): ReactElement => {
-  if (command instanceof BaseOptionCommand) {
-    return <OptionButton inputCommand={command} isHorizontal={isHorizontal} />;
-  } else {
-    return <CommandButton inputCommand={command} isHorizontal={isHorizontal} />;
-  }
-};
-
 export const CommandButton = ({
   inputCommand,
   isHorizontal = false
@@ -58,14 +26,15 @@ export const CommandButton = ({
   const [uniqueId, setUniqueId] = useState<number>(0);
   const [icon, setIcon] = useState<IconType | undefined>(undefined);
 
+  const update = useCallback((command: BaseCommand) => {
+    setChecked(command.isChecked);
+    setEnabled(command.isEnabled);
+    setVisible(command.isVisible);
+    setUniqueId(command.uniqueId);
+    setIcon(getIcon(command));
+  }, []);
+
   useEffect(() => {
-    function update(command: BaseCommand): void {
-      setChecked(command.isChecked);
-      setEnabled(command.isEnabled);
-      setVisible(command.isVisible);
-      setUniqueId(command.uniqueId);
-      setIcon(getIcon(command));
-    }
     update(command);
     command.addEventListener(update);
     return () => {
@@ -95,25 +64,3 @@ export const CommandButton = ({
     </CogsTooltip>
   );
 };
-
-function getKey(command: BaseCommand | undefined, index: number): number {
-  if (command === undefined) {
-    return -index;
-  }
-
-  return command.uniqueId;
-}
-
-function CommandButtonWrapper({
-  command,
-  isHorizontal
-}: {
-  command: BaseCommand | undefined;
-  isHorizontal: boolean;
-}): ReactElement {
-  if (command === undefined) {
-    const direction = !isHorizontal ? 'horizontal' : 'vertical';
-    return <Divider weight="2px" length="24px" direction={direction} />;
-  }
-  return CreateButton(command);
-}
diff --git a/react-components/src/components/Architecture/CommandButtons.tsx b/react-components/src/components/Architecture/CommandButtons.tsx
new file mode 100644
index 00000000000..8c887272dc3
--- /dev/null
+++ b/react-components/src/components/Architecture/CommandButtons.tsx
@@ -0,0 +1,61 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type ReactElement } from 'react';
+import { Divider } from '@cognite/cogs.js';
+import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
+import { OptionButton } from './OptionButton';
+import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
+import { CommandButton } from './CommandButton';
+
+export const CreateButton = (command: BaseCommand, isHorizontal = false): ReactElement => {
+  if (command instanceof BaseOptionCommand) {
+    return <OptionButton inputCommand={command} isHorizontal={isHorizontal} />;
+  } else {
+    return <CommandButton inputCommand={command} isHorizontal={isHorizontal} />;
+  }
+};
+
+export const CommandButtons = ({
+  commands,
+  isHorizontal = false
+}: {
+  commands: Array<BaseCommand | undefined>;
+  isHorizontal: boolean;
+}): ReactElement => {
+  return (
+    <>
+      {commands.map(
+        (command, index): ReactElement => (
+          <CommandButtonWrapper
+            command={command}
+            isHorizontal={isHorizontal}
+            key={getKey(command, index)}
+          />
+        )
+      )}
+    </>
+  );
+};
+
+function getKey(command: BaseCommand | undefined, index: number): number {
+  if (command === undefined) {
+    return -index;
+  }
+  return command.uniqueId;
+}
+
+function CommandButtonWrapper({
+  command,
+  isHorizontal
+}: {
+  command: BaseCommand | undefined;
+  isHorizontal: boolean;
+}): ReactElement {
+  if (command === undefined) {
+    const direction = !isHorizontal ? 'horizontal' : 'vertical';
+    return <Divider weight="2px" length="24px" direction={direction} />;
+  }
+  return CreateButton(command);
+}
diff --git a/react-components/src/components/Architecture/OptionButton.tsx b/react-components/src/components/Architecture/OptionButton.tsx
index d7d1030d1c5..ca880eb71af 100644
--- a/react-components/src/components/Architecture/OptionButton.tsx
+++ b/react-components/src/components/Architecture/OptionButton.tsx
@@ -2,7 +2,7 @@
  * Copyright 2023 Cognite AS
  */
 
-import { useEffect, useMemo, useState, type ReactElement } from 'react';
+import { useCallback, useEffect, useMemo, useState, type ReactElement } from 'react';
 import { Button, Dropdown, Menu, Tooltip as CogsTooltip, type IconType } from '@cognite/cogs.js';
 import { useTranslation } from '../i18n/I18n';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
@@ -33,13 +33,14 @@ export const OptionButton = ({
   const [uniqueId, setUniqueId] = useState<number>(0);
   const [icon, setIcon] = useState<IconType | undefined>(undefined);
 
+  const update = useCallback((command: BaseCommand) => {
+    setEnabled(command.isEnabled);
+    setVisible(command.isVisible);
+    setUniqueId(command.uniqueId);
+    setIcon(getIcon(command));
+  }, []);
+
   useEffect(() => {
-    function update(command: BaseCommand): void {
-      setEnabled(command.isEnabled);
-      setVisible(command.isVisible);
-      setUniqueId(command.uniqueId);
-      setIcon(getIcon(command));
-    }
     update(command);
     command.addEventListener(update);
     return () => {
diff --git a/react-components/src/components/Architecture/RevealButtons.tsx b/react-components/src/components/Architecture/RevealButtons.tsx
index ad006f97ee8..290b4561333 100644
--- a/react-components/src/components/Architecture/RevealButtons.tsx
+++ b/react-components/src/components/Architecture/RevealButtons.tsx
@@ -4,7 +4,6 @@
 
 import { type ReactElement } from 'react';
 import { NavigationTool } from '../../architecture/base/concreteCommands/NavigationTool';
-import { CreateButton } from './CommandButton';
 import { FitViewCommand } from '../../architecture/base/concreteCommands/FitViewCommand';
 import { FlexibleControlsType } from '@cognite/reveal';
 import { SetFlexibleControlsTypeCommand } from '../../architecture/base/concreteCommands/SetFlexibleControlsTypeCommand';
@@ -12,6 +11,7 @@ import { SetAxisVisibleCommand } from '../../architecture/concrete/axis/SetAxisV
 import { ClipTool } from '../../architecture/concrete/clipping/ClipTool';
 import { MeasurementTool } from '../../architecture/concrete/measurements/MeasurementTool';
 import { KeyboardSpeedCommand } from '../../architecture/base/concreteCommands/KeyboardSpeedCommand';
+import { CreateButton } from './CommandButtons';
 
 export class RevealButtons {
   static FitView = (): ReactElement => CreateButton(new FitViewCommand());
diff --git a/react-components/src/components/Architecture/Toolbar.tsx b/react-components/src/components/Architecture/Toolbar.tsx
index 5cac22ce676..e2e90fa6d8b 100644
--- a/react-components/src/components/Architecture/Toolbar.tsx
+++ b/react-components/src/components/Architecture/Toolbar.tsx
@@ -5,7 +5,7 @@ import { ToolBar } from '@cognite/cogs.js';
 import styled from 'styled-components';
 import { useMemo, useState, type ReactElement } from 'react';
 import { withSuppressRevealEvents } from '../../higher-order-components/withSuppressRevealEvents';
-import { CommandButtons } from './CommandButton';
+import { CommandButtons } from './CommandButtons';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import { useRenderTarget } from '../RevealCanvas/ViewerContext';
 import { ActiveToolUpdater } from '../../architecture/base/reactUpdaters/ActiveToolUpdater';