diff --git a/react-components/src/components/Architecture/CommandButton.tsx b/react-components/src/components/Architecture/CommandButton.tsx index fa104b2c53a..0a253728903 100644 --- a/react-components/src/components/Architecture/CommandButton.tsx +++ b/react-components/src/components/Architecture/CommandButton.tsx @@ -9,6 +9,7 @@ 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 { CopyToClipboardCommand } from '../../architecture/base/concreteCommands/CopyToClipboardCommand'; export const CommandButtons = ({ commands, @@ -20,7 +21,13 @@ export const CommandButtons = ({ return ( <> {commands.map( - (command, index): ReactElement => addCommandButton(command, isHorizontal, index) + (command, index): ReactElement => ( + + ) )} ); @@ -60,7 +67,7 @@ export const CommandButton = ({ return () => { newCommand.removeEventListener(update); }; - }, [newCommand]); + }, [newCommand.isEnabled, newCommand.isChecked, newCommand.isVisible]); if (!isVisible) { return <>; @@ -106,14 +113,24 @@ function getDefaultCommand(newCommand: BaseCommand, renderTarget: RevealRenderTa return newCommand; } -function addCommandButton( - command: BaseCommand | undefined, - isHorizontal: boolean, - index: number -): ReactElement { +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 ; + return ; } - return ; + return ; } diff --git a/react-components/src/components/Architecture/DomainObjectPanel.tsx b/react-components/src/components/Architecture/DomainObjectPanel.tsx index aa911ab48b3..10ff2097302 100644 --- a/react-components/src/components/Architecture/DomainObjectPanel.tsx +++ b/react-components/src/components/Architecture/DomainObjectPanel.tsx @@ -3,7 +3,7 @@ */ import { Icon, type IconType, Body } from '@cognite/cogs.js'; import styled from 'styled-components'; -import { useState, type ReactElement } from 'react'; +import { useEffect, useMemo, useState, type ReactElement } from 'react'; import { DomainObjectPanelUpdater, type DomainObjectInfo @@ -27,23 +27,35 @@ export const DomainObjectPanel = (): ReactElement => { DomainObjectInfo | undefined >(); - DomainObjectPanelUpdater.setDomainObjectDelegate(setCurrentDomainObjectInfo); + const domainObject = currentDomainObjectInfo?.domainObject; + const commands = useMemo(() => domainObject?.getPanelToolbar(), [domainObject]); + const info = domainObject?.getPanelInfo(); + const style = domainObject?.getPanelInfoStyle(); + const root = domainObject?.rootDomainObject; + + useEffect(() => { + DomainObjectPanelUpdater.setDomainObjectDelegate(setCurrentDomainObjectInfo); + + if (commands === undefined || info === undefined) { + return; + } + + // Set in the get string on the copy command if any + for (const command of commands) { + if (command instanceof CopyToClipboardCommand) + command.getString = () => toString(info, t, unitSystem); + } + }, [setCurrentDomainObjectInfo, commands]); const { t } = useTranslation(); - if (currentDomainObjectInfo === undefined) { - return <>; - } - const domainObject = currentDomainObjectInfo.domainObject; - if (domainObject === undefined) { - return <>; - } - const info = domainObject.getPanelInfo(); - if (info === undefined) { - return <>; - } - const style = domainObject.getPanelInfoStyle(); - const root = domainObject.rootDomainObject; - if (root === undefined) { + + if ( + domainObject === undefined || + root === undefined || + info === undefined || + commands === undefined || + style === undefined + ) { return <>; } const unitSystem = root.unitSystem; @@ -51,14 +63,6 @@ export const DomainObjectPanel = (): ReactElement => { const icon = domainObject.icon as IconType; const header = info.header; - const commands = domainObject.getPanelToolbar(); - - // Set in the get string on the copy command if any - for (const command of commands) { - if (command instanceof CopyToClipboardCommand) - command.getString = () => toString(info, t, unitSystem); - } - const text = header?.getText(t); return ( { {text} )} - + + + @@ -115,6 +121,7 @@ export const DomainObjectPanel = (): ReactElement => { function toString(info: PanelInfo, translate: TranslateDelegate, unitSystem: UnitSystem): string { let result = ''; + { const { header } = info; const text = header?.getText(translate);