fix(toolbox): Preserve user-specified tool state and streamline command execution (#4063)

platform/ui/src/components/AdvancedToolbox/ToolSettings.tsx

@@ -103,7 +103,7 @@ const renderDoubleRangeSetting = option => {
       key={option.id}
     >
       <InputDoubleRange
-        values={option.values}
+        values={option.value}
         onChange={option.commands}
         minValue={option.min}
         maxValue={option.max}

platform/ui/src/components/Icon/getIcon.js

@@ -34,6 +34,7 @@ import link from './../../assets/icons/tool-stack-image-sync.svg';
 import listBullets from './../../assets/icons/list-bullets.svg';
 import lock from './../../assets/icons/lock.svg';
 import logoOhifSmall from './../../assets/icons/logo-ohif-small.svg';
+import logoDarkBackGround from './../../assets/icons/ohif-logo-color-darkbg.svg';
 import magnifier from './../../assets/icons/magnifier.svg';
 import notificationwarningDiamond from './../../assets/icons/notificationwarning-diamond.svg';
 import pencil from './../../assets/icons/pencil.svg';
@@ -264,6 +265,7 @@ const ICONS = {
   'list-bullets': listBullets,
   lock: lock,
   'logo-ohif-small': logoOhifSmall,
+  'logo-dark-background': logoDarkBackGround,
   magnifier: magnifier,
   exclamation: exclamation,
   'notificationwarning-diamond': notificationwarningDiamond,

platform/ui/src/components/Toolbox/Toolbox.tsx

@@ -21,6 +21,7 @@ function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...
   });
 
   const prevButtonIdsRef = useRef();
+  const prevToolboxStateRef = useRef();
 
   useEffect(() => {
     const currentButtonIdsStr = JSON.stringify(
@@ -33,11 +34,24 @@ function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...
       })
     );
 
-    if (prevButtonIdsRef.current === currentButtonIdsStr) {
+    const currentToolBoxStateStr = JSON.stringify(
+      Object.keys(toolboxState.toolOptions).map(tool => {
+        const options = toolboxState.toolOptions[tool];
+        if (Array.isArray(options)) {
+          return options?.map(option => `${option.id}-${option.value}`);
+        }
+      })
+    );
+
+    if (
+      prevButtonIdsRef.current === currentButtonIdsStr &&
+      prevToolboxStateRef.current === currentToolBoxStateStr
+    ) {
       return;
     }
 
     prevButtonIdsRef.current = currentButtonIdsStr;
+    prevToolboxStateRef.current = currentToolBoxStateStr;
 
     const initializeOptionsWithEnhancements = toolbarButtons.reduce(
       (accumulator, toolbarButton) => {
@@ -51,11 +65,15 @@ function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...
               return option;
             }
 
+            const value =
+              toolboxState.toolOptions?.[parentId]?.find(prop => prop.id === option.id)?.value ??
+              option.value;
+
+            const updatedOptions = toolboxState.toolOptions?.[parentId];
+
             return {
               ...option,
-              value:
-                toolboxState.toolOptions?.[parentId]?.find(prop => prop.id === option.id)?.value ??
-                option.value,
+              value,
               commands: value => {
                 api.handleToolOptionChange(parentId, option.id, value);
 
@@ -72,10 +90,15 @@ function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...
                   } else if (isObject) {
                     commandsManager.run({
                       ...command,
-                      commandOptions: { ...command.commandOptions, ...option, value },
+                      commandOptions: {
+                        ...command.commandOptions,
+                        ...option,
+                        value,
+                        options: updatedOptions,
+                      },
                     });
                   } else if (isFunction) {
-                    command({ value, commandsManager, servicesManager });
+                    command({ value, commandsManager, servicesManager, options: updatedOptions });
                   }
                 });
               },
@@ -101,7 +124,7 @@ function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...
     );
 
     api.initializeToolOptions(initializeOptionsWithEnhancements);
-  }, [toolbarButtons, api]);
+  }, [toolbarButtons, api, toolboxState]);
 
   const handleToolOptionChange = (toolName, optionName, newValue) => {
     api.handleToolOptionChange(toolName, optionName, newValue);

platform/ui/src/components/Toolbox/ToolboxUI.tsx

@@ -1,9 +1,17 @@
-import React from 'react';
-import { PanelSection, ToolSettings, Tooltip } from '../../components';
+import React, { useEffect, useRef } from 'react';
+import { PanelSection, ToolSettings } from '../../components';
 import classnames from 'classnames';
 
 const ItemsPerRow = 4;
 
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
 /**
  * Just refactoring from the toolbox component to make it more readable
  */
@@ -18,6 +26,27 @@ function ToolboxUI(props) {
     useCollapsedPanel = true,
   } = props;
 
+  const prevToolOptions = usePrevious(activeToolOptions);
+
+  useEffect(() => {
+    if (!activeToolOptions) {
+      return;
+    }
+
+    activeToolOptions.forEach((option, index) => {
+      const prevOption = prevToolOptions ? prevToolOptions[index] : undefined;
+      if (!prevOption || option.value !== prevOption.value) {
+        const isOptionValid = option.condition
+          ? option.condition({ options: activeToolOptions })
+          : true;
+        if (isOptionValid) {
+          const { commands } = option;
+          commands(option.value);
+        }
+      }
+    });
+  }, [activeToolOptions]);
+
   const render = () => {
     return (
       <>
@@ -34,7 +63,8 @@ function ToolboxUI(props) {
               const toolClasses = `ml-1 ${isLastRow ? '' : 'mb-2'}`;
 
               const onInteraction = ({ itemId, id, commands }) => {
-                handleToolSelect(itemId || id);
+                const idToUse = itemId || id;
+                handleToolSelect(idToUse);
                 props.onInteraction({
                   itemId,
                   commands,

platform/ui/src/components/Tooltip/Tooltip.tsx

@@ -78,6 +78,13 @@ const Tooltip = ({
     handleMouseOutDebounced();
   };
 
+  useEffect(() => {
+    return () => {
+      handleMouseOverDebounced.cancel();
+      handleMouseOutDebounced.cancel();
+    };
+  }, [handleMouseOverDebounced, handleMouseOutDebounced]);
+
   useEffect(() => {
     if (!isOpen && onHide) {
       onHide();