OHIF-285/OHIF-274: Fix default hanging of display sets into the ViewportGrid (#1917)

* OHIF-285/OHIF-274: Fix default hanging of display sets into the ViewportGrid

Co-authored-by: James A. Petts <jamesapetts@gmail.com>

extensions/default/src/ViewerLayout/index.jsx

@@ -54,7 +54,11 @@ function ViewerLayout({
     };
   };
 
-  const defaultTool = { icon: 'tool-more-menu', label: 'More', isActive: false };
+  const defaultTool = {
+    icon: 'tool-more-menu',
+    label: 'More',
+    isActive: false,
+  };
   const [toolbars, setToolbars] = useState({ primary: [], secondary: [] });
   const [activeTool, setActiveTool] = useState(defaultTool);
 
@@ -63,7 +67,12 @@ function ViewerLayout({
   };
 
   const onPrimaryClickHandler = (evt, btn) => {
-    if (btn.props && btn.props.commands && evt.value && btn.props.commands[evt.value]) {
+    if (
+      btn.props &&
+      btn.props.commands &&
+      evt.value &&
+      btn.props.commands[evt.value]
+    ) {
       const { commandName, commandOptions } = btn.props.commands[evt.value];
       commandsManager.runCommand(commandName, commandOptions);
     }
@@ -75,8 +84,13 @@ function ViewerLayout({
       () => {
         console.warn('~~~ TOOL BAR MODIFIED EVENT CAUGHT');
         const updatedToolbars = {
-          primary: ToolBarService.getButtonSection('primary', { onClick: onPrimaryClickHandler, setActiveTool: setActiveToolHandler }),
-          secondary: ToolBarService.getButtonSection('secondary', { setActiveTool: setActiveToolHandler }),
+          primary: ToolBarService.getButtonSection('primary', {
+            onClick: onPrimaryClickHandler,
+            setActiveTool: setActiveToolHandler,
+          }),
+          secondary: ToolBarService.getButtonSection('secondary', {
+            setActiveTool: setActiveToolHandler,
+          }),
         };
         setToolbars(updatedToolbars);
       }
@@ -94,18 +108,25 @@ function ViewerLayout({
       <Header>
         <ErrorBoundary context="Primary Toolbar">
           <div className="relative flex justify-center">
-            {toolbars.primary.map(toolDef => {
+            {toolbars.primary.map((toolDef, index) => {
               const isNested = Array.isArray(toolDef);
               if (!isNested) {
                 const { id, Component, componentProps } = toolDef;
                 return <Component key={id} id={id} {...componentProps} />;
               } else {
                 return (
-                  <NestedMenu isActive={activeTool.isActive} icon={activeTool.icon} label={activeTool.label}>
+                  <NestedMenu
+                    key={index}
+                    isActive={activeTool.isActive}
+                    icon={activeTool.icon}
+                    label={activeTool.label}
+                  >
                     <div className="flex">
                       {toolDef.map(x => {
                         const { id, Component, componentProps } = x;
-                        return <Component key={id} id={id} {...componentProps} />;
+                        return (
+                          <Component key={id} id={id} {...componentProps} />
+                        );
                       })}
                     </div>
                   </NestedMenu>
@@ -174,7 +195,7 @@ ViewerLayout.propTypes = {
   leftPanels: PropTypes.array,
   rightPanels: PropTypes.array,
   /** Responsible for rendering our grid of viewports; provided by consuming application */
-  children: PropTypes.oneOfType(PropTypes.node, PropTypes.func).isRequired,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
 };
 
 ViewerLayout.defaultProps = {