Nested toolbar w/ "sticky" when clicked

platform/core/src/services/ToolBarService/ToolBarService.js

@@ -63,61 +63,40 @@ export default class ToolBarService {
   }
 
   getButtonSection(key) {
-    const buttonSection = this.buttonSections[key];
+    const buttonSectionIds = this.buttonSections[key];
     const buttonsInSection = [];
 
-    if (!buttonSection) {
+    if (!buttonSectionIds) {
       return buttonsInSection;
     }
 
-    buttonSection.forEach(btnId => {
-      const button = this.buttons[btnId];
-      if (button) {
-        buttonsInSection.push(button);
+    buttonSectionIds.forEach(btnIdOrArray => {
+      const isNested = Array.isArray(btnIdOrArray);
+
+      if (isNested) {
+        const btnIds = btnIdOrArray;
+        const nestedButtons = [];
+
+        btnIds.forEach(nestedBtnId => {
+          const nestedBtn = this.buttons[nestedBtnId];
+          const mappedNestedBtn = this._mapButtonToDisplay(nestedBtn, key);
+
+          nestedButtons.push(mappedNestedBtn);
+        });
+
+        if (nestedButtons.length) {
+          buttonsInSection.push(nestedButtons);
+        }
       } else {
-        console.warn(`${btnId} is not a registered button.`);
+        const btnId = btnIdOrArray;
+        const btn = this.buttons[btnId];
+        const mappedBtn = this._mapButtonToDisplay(btn, key);
+
+        buttonsInSection.push(mappedBtn);
       }
     });
 
-    const mappedButtonSection = buttonsInSection.map(bt => {
-      const { id, type, component, props } = bt;
-      const buttonType = this._buttonTypes()[type];
-
-      // Filter out & warn
-      if (!buttonType) {
-        return;
-      }
-
-      const onClick = evt => {
-        console.warn(
-          `Handling click for: BTN::${id}`,
-          evt,
-          bt,
-          buttonType,
-          btnSection
-        );
-        const btnSection = key;
-        if (buttonType.clickHandler) {
-          buttonType.clickHandler(evt, bt, btnSection);
-        }
-        if (bt.props.onClick) {
-          bt.onClick(evt, bt, btnSection);
-        }
-        if (bt.props.clickHandler) {
-          bt.clickHandler(evt, bt, btnSection);
-        }
-
-        this._trySetButtonActive(id);
-      };
-
-      return {
-        id,
-        Component: component || buttonType.defaultComponent,
-        componentProps: Object.assign({}, props, { onClick }), //
-      };
-    });
-
-    return mappedButtonSection;
+    return buttonsInSection;
   }
 
   /**
@@ -152,4 +131,38 @@ export default class ToolBarService {
       });
     }
   };
+
+  /**
+   *
+   * @param {*} btn
+   * @param {*} btnSection
+   */
+  _mapButtonToDisplay(btn, btnSection) {
+    const { id, type, component, props } = btn;
+    const buttonType = this._buttonTypes()[type];
+
+    if (!buttonType) {
+      return;
+    }
+
+    const onClick = evt => {
+      if (buttonType.clickHandler) {
+        buttonType.clickHandler(evt, btn, btnSection);
+      }
+      if (btn.props.onClick) {
+        btn.onClick(evt, btn, btnSection);
+      }
+      if (btn.props.clickHandler) {
+        btn.clickHandler(evt, btn, btnSection);
+      }
+
+      this._trySetButtonActive(id);
+    };
+
+    return {
+      id,
+      Component: component || buttonType.defaultComponent,
+      componentProps: Object.assign({}, props, { onClick }), //
+    };
+  }
 }

platform/ui/src/components/ToolbarButton/ToolbarButton.jsx

@@ -28,6 +28,7 @@ const ToolbarButton = ({
   return (
     <div key={id}>
       <Tooltip
+        isSticky={shouldShowDropdown}
         content={shouldShowDropdown ? dropdownContent : label}
         tight={shouldShowDropdown}
       >

platform/ui/src/components/Tooltip/Tooltip.jsx

@@ -24,7 +24,7 @@ const arrowPositionStyle = {
   },
 };
 
-const Tooltip = ({ position, content, tight, children }) => {
+const Tooltip = ({ content, isSticky, position, tight, children }) => {
   const [isActive, setIsActive] = useState(false);
 
   const handleMouseOver = () => {
@@ -39,6 +39,8 @@ const Tooltip = ({ position, content, tight, children }) => {
     }
   };
 
+  const isOpen = isSticky || isActive;
+
   return (
     <div
       className="relative "
@@ -51,8 +53,8 @@ const Tooltip = ({ position, content, tight, children }) => {
       {children}
       <div
         className={classnames(`tooltip tooltip-${position}`, {
-          block: isActive,
-          hidden: !isActive,
+          block: isOpen,
+          hidden: !isOpen,
         })}
       >
         <div
@@ -65,7 +67,7 @@ const Tooltip = ({ position, content, tight, children }) => {
         >
           {content}
           <svg
-            className="absolute text-primary-dark h-4 stroke-secondary-main"
+            className="absolute h-4 text-primary-dark stroke-secondary-main"
             style={arrowPositionStyle[position]}
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
@@ -80,11 +82,12 @@ const Tooltip = ({ position, content, tight, children }) => {
 
 Tooltip.defaultProps = {
   tight: false,
+  isSticky: false,
   position: 'bottom',
 };
 
 Tooltip.propTypes = {
-  tight: PropTypes.bool,
+  content: PropTypes.node.isRequired,
   position: PropTypes.oneOf([
     'bottom',
     'bottom-left',
@@ -92,8 +95,9 @@ Tooltip.propTypes = {
     'left',
     'right',
   ]),
+  isSticky: PropTypes.bool,
+  tight: PropTypes.bool,
   children: PropTypes.node.isRequired,
-  content: PropTypes.node.isRequired,
 };
 
 export default Tooltip;

platform/ui/src/components/Tooltip/tooltip.css

@@ -1,10 +1,10 @@
 .tooltip {
-  @apply z-10 absolute;
+  @apply absolute z-10;
 }
 
 /* TOOLTIP WORKAROUND FOR ARROW UP */
 .tooltip.tooltip-bottom .tooltip-box::before {
-  @apply bg-primary-dark absolute z-10;
+  @apply absolute z-10 bg-primary-dark;
   content: '';
   width: 14px;
   height: 1px;
@@ -44,7 +44,7 @@
 }
 
 .tooltip.tooltip-right .tooltip-box::before {
-  @apply bg-primary-dark absolute z-10;
+  @apply absolute z-10 bg-primary-dark;
   content: '';
   width: 2px;
   height: 15px;
@@ -54,7 +54,7 @@
 }
 
 .tooltip.tooltip-left .tooltip-box::before {
-  @apply bg-primary-dark absolute z-10;
+  @apply absolute z-10 bg-primary-dark;
   content: '';
   width: 2px;
   height: 15px;
@@ -64,7 +64,7 @@
 }
 
 .tooltip.tooltip-bottom-right .tooltip-box::before {
-  @apply bg-primary-dark absolute z-10;
+  @apply absolute z-10 bg-primary-dark;
   content: '';
   width: 15px;
   height: 2px;
@@ -73,19 +73,10 @@
 }
 
 .tooltip.tooltip-bottom-left .tooltip-box::before {
-  @apply bg-primary-dark absolute z-10;
+  @apply absolute z-10 bg-primary-dark;
   content: '';
   width: 15px;
   height: 2px;
   left: 5px;
   top: -1px;
 }
-
-/* TODO: REMOVE BELOW CLASS "showTooltipOnHover" AFTER TOOLTIP REPLACEMENT */
-.showTooltipOnHover .tooltip {
-  display: none;
-}
-
-.showTooltipOnHover:hover .tooltip {
-  display: block;
-}

platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

@@ -184,7 +184,7 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
             </div>
           }
         >
-          <div className="relative flex justify-end showTooltipOnHover">
+          <div className="relative flex justify-end">
             <div className="relative">
               <Icon name="profile" className="w-5 text-white" />
               <Icon

platform/ui/src/components/index.js

@@ -37,7 +37,6 @@ import Thumbnail from './Thumbnail';
 import ThumbnailNoImage from './ThumbnailNoImage';
 import ThumbnailTracked from './ThumbnailTracked';
 import ThumbnailList from './ThumbnailList';
-import Toolbar from './Toolbar';
 import ToolbarButton from './ToolbarButton';
 import Tooltip from './Tooltip';
 import Typography from './Typography';
@@ -87,7 +86,6 @@ export {
   ThumbnailNoImage,
   ThumbnailTracked,
   ThumbnailList,
-  Toolbar,
   ToolbarButton,
   Tooltip,
   Typography,