Fix/update branch cherry pick (#2039)

* Update all the icons

* Turn off global tool sync; watch as the world burns

* Shift a bunch of things around so we can start tracking/setting per element

* ToolBarService to initiate one of three different calls; callback passed to all button types

* SplitButton and Toolbar Button to use new `onInteraction` prop and new toolbar state

* Changes to toolbar button interface and config

* Fix broken layout selector

* Update SR viewport to activate tools in viewport component

* Duplicate activation logic in measurement tracking extension

* Add alternative/dashed variants for SR Viewport

* pass through "setToolActive" commands for other viewport types

* fix small overlay bugs (no wwwc or scale info)

* Show SpacingBetweenSlices instead of PixelSpacing in patient information dialog

* Fix prop-types

* Update tracked viewport to have alternative tracked styling

* alt styling for SR viewports

* Update to support isLocked + isRehydratable

* fix broken logic

* fix broken logic

* switch icon style

* fix icon styles

* hover and click to start flow

* expedited workflow when data is not dirty (just after SR hydration)

* fix: setting elliptical roi tool

* fix arrow annotate dialog

* fix: do not show learn more button for now

* remove dead code

* simpler cache invalidation

* simpler cache invalidation part 2

* Fix for unable to spand study cards on separate pages

platform/ui/src/components/SplitButton/SplitButton.jsx

@@ -6,117 +6,210 @@ import OutsideClickHandler from 'react-outside-click-handler';
 import { Icon, Tooltip, ListMenu } from '@ohif/ui';
 
 const baseClasses = {
-  Button: 'h-12 flex items-center rounded-md border-transparent border-2 cursor-pointer',
-  Primary: 'h-full flex flex-1 items-center rounded-md rounded-tr-none rounded-br-none',
-  Secondary: 'h-full flex items-center justify-center rounded-tr-md rounded-br-md w-4',
+  Button:
+    'h-12 flex items-center rounded-md border-transparent border-2 cursor-pointer',
+  Primary:
+    'h-full flex flex-1 items-center rounded-md rounded-tr-none rounded-br-none',
+  Secondary:
+    'h-full flex items-center justify-center rounded-tr-md rounded-br-md w-4',
   PrimaryIcon: 'w-5 h-5',
   SecondaryIcon: 'w-4 h-full stroke-1',
   Separator: 'border-l pt-2 pb-2',
-  Content: 'absolute z-10 top-0 mt-16'
+  Content: 'absolute z-10 top-0 mt-16',
 };
 
 const classes = {
-  Button: ({ isExpanded, primary }) => classNames(
-    baseClasses.Button,
-    !isExpanded && !primary.isActive && 'hover:bg-primary-dark hover:border-primary-dark'
-  ),
+  Button: ({ isExpanded, primary }) =>
+    classNames(
+      baseClasses.Button,
+      !isExpanded &&
+        !primary.isActive &&
+        'hover:bg-primary-dark hover:border-primary-dark'
+    ),
   Interface: 'h-full flex flex-row items-center',
-  Primary: ({ primary, isExpanded }) => classNames(
-    baseClasses.Primary,
-    primary.isActive && !isExpanded ? 'bg-primary-light rounded-tr-md rounded-br-md' :
-      isExpanded ? 'bg-primary-dark' : 'bg-secondary-dark hover:bg-primary-dark'
-  ),
-  Secondary: ({ isExpanded, primary }) => classNames(
-    baseClasses.Secondary,
-    isExpanded ? 'bg-primary-light rounded-tr-md rounded-br-md'
-      : primary.isActive ? 'bg-secondary-dark' : 'hover:bg-primary-dark bg-secondary-dark'
-  ),
-  PrimaryIcon: ({ primary, isExpanded }) => classNames(
-    baseClasses.PrimaryIcon,
-    primary.isActive && !isExpanded ? 'text-primary-dark' : 'text-common-bright'
-  ),
-  SecondaryIcon: ({ isExpanded }) => classNames(
-    baseClasses.SecondaryIcon,
-    isExpanded ? 'text-primary-dark' : 'text-primary-active hover:text-common-bright'
-  ),
-  Separator: ({ primary, isExpanded, isHovering }) => classNames(
-    baseClasses.Separator,
-    isHovering || isExpanded || primary.isActive ? 'border-transparent' : 'border-primary-active'
-  ),
-  Content: ({ isExpanded }) => classNames(baseClasses.Content, isExpanded ? 'block' : 'hidden')
+  Primary: ({ primary, isExpanded }) =>
+    classNames(
+      baseClasses.Primary,
+      primary.isActive && !isExpanded
+        ? 'bg-primary-light rounded-tr-md rounded-br-md'
+        : isExpanded
+        ? 'bg-primary-dark'
+        : 'bg-secondary-dark hover:bg-primary-dark'
+    ),
+  Secondary: ({ isExpanded, primary }) =>
+    classNames(
+      baseClasses.Secondary,
+      isExpanded
+        ? 'bg-primary-light rounded-tr-md rounded-br-md'
+        : primary.isActive
+        ? 'bg-secondary-dark'
+        : 'hover:bg-primary-dark bg-secondary-dark'
+    ),
+  PrimaryIcon: ({ primary, isExpanded }) =>
+    classNames(
+      baseClasses.PrimaryIcon,
+      primary.isActive && !isExpanded
+        ? 'text-primary-dark'
+        : 'text-common-bright'
+    ),
+  SecondaryIcon: ({ isExpanded }) =>
+    classNames(
+      baseClasses.SecondaryIcon,
+      isExpanded
+        ? 'text-primary-dark'
+        : 'text-primary-active hover:text-common-bright'
+    ),
+  Separator: ({ primary, isExpanded, isHovering }) =>
+    classNames(
+      baseClasses.Separator,
+      isHovering || isExpanded || primary.isActive
+        ? 'border-transparent'
+        : 'border-primary-active'
+    ),
+  Content: ({ isExpanded }) =>
+    classNames(baseClasses.Content, isExpanded ? 'block' : 'hidden'),
 };
 
 const SplitButton = ({
   isRadio,
   isAction,
+  //
+  bState,
+  //
+  groupId,
   primary: _primary,
   secondary,
-  onClick,
   items: _items,
   renderer,
+  onInteraction,
 }) => {
+  const { primaryToolId, toggles, groups } = bState;
   /* Bubbles up individual item clicks */
-  const getSplitButtonItems = items => items.map((item, index) => ({
-    ...item,
-    index,
-    onClick: () => {
-      if (item.onClick) item.onClick({ ...item, index });
-      onClick({ item, index });
+  const getSplitButtonItems = items =>
+    items.map((item, index) => ({
+      ...item,
+      index,
+      onClick: () => {
+        onInteraction({
+          groupId,
+          //
+          itemId: item.id,
+          interactionType: item.type,
+          // splitButtonId? (so we can track group?)
+          // info to fire item's command/event?
+          commandName: item.commandName,
+          commandOptions: item.commandOptions,
+        });
 
-      setState(state => ({
-        ...state,
-        primary: !isAction ? { ...item, index } : state.primary,
-        isExpanded: false,
-        items: getSplitButtonItems(_items).filter(item => isRadio && !isAction ? item.index !== index : true)
-      }));
-    }
-  }));
+        setState(state => ({
+          ...state,
+          primary: !isAction ? { ...item, index } : state.primary,
+          isExpanded: false,
+          items: getSplitButtonItems(_items).filter(item =>
+            isRadio && !isAction ? item.index !== index : true
+          ),
+        }));
+      },
+    }));
 
   const [state, setState] = useState({
     primary: _primary,
-    items: getSplitButtonItems(_items),
+    items: getSplitButtonItems(_items).filter(item =>
+      isRadio && !isAction ? item.id !== _primary.id : true
+    ),
     isHovering: false,
-    isExpanded: false
+    isExpanded: false,
   });
 
-  const onSecondaryClickHandler = () => setState(state => ({ ...state, isExpanded: !state.isExpanded }));
-  const onMouseEnterHandler = () => setState(state => ({ ...state, isHovering: true }));
-  const onMouseLeaveHandler = () => setState(state => ({ ...state, isHovering: false }));
-  const outsideClickHandler = () => setState(state => ({ ...state, isExpanded: false }));
+  const onSecondaryClickHandler = () =>
+    setState(state => ({ ...state, isExpanded: !state.isExpanded }));
+  const onMouseEnterHandler = () =>
+    setState(state => ({ ...state, isHovering: true }));
+  const onMouseLeaveHandler = () =>
+    setState(state => ({ ...state, isHovering: false }));
+  const outsideClickHandler = () =>
+    setState(state => ({ ...state, isExpanded: false }));
   const onPrimaryClickHandler = () => {
-    const primary = { ...state.primary, isActive: !state.primary.isActive };
-    state.primary.onClick(primary);
-    setState(state => ({ ...state, isExpanded: false, primary }));
+    onInteraction({
+      groupId,
+      itemId: state.primary.id,
+      interactionType: state.primary.type,
+      // splitButtonId? (so we can track group?)
+      // info to fire item's command/event?
+      //
+      commandName: state.primary.commandName,
+      commandOptions: state.primary.commandOptions,
+    });
   };
 
+  const isPrimaryActive =
+    (state.primary.type === 'tool' && primaryToolId === state.primary.id) ||
+    (state.primary.type === 'toggle' && toggles[state.primary.id] === true);
+
   return (
     <OutsideClickHandler onOutsideClick={outsideClickHandler}>
-      <div name='SplitButton' className="relative">
+      <div name="SplitButton" className="relative">
         <div
-          className={classes.Button({ ...state })}
+          className={classes.Button({
+            ...state,
+            primary: { isActive: isPrimaryActive },
+          })}
           onMouseEnter={onMouseEnterHandler}
           onMouseLeave={onMouseLeaveHandler}
         >
           <div className={classes.Interface}>
-            <div onClick={onPrimaryClickHandler} className={classes.Primary({ ...state })}>
-              <Tooltip isDisabled={!state.primary.tooltip} content={state.primary.tooltip}>
-                <div className='p-3 flex items-center justify-center h-full w-full'>
-                  <Icon name={state.primary.icon} className={classes.PrimaryIcon({ ...state })} />
+            <div
+              onClick={onPrimaryClickHandler}
+              className={classes.Primary({
+                ...state,
+                primary: { isActive: isPrimaryActive },
+              })}
+            >
+              <Tooltip
+                isDisabled={!state.primary.tooltip}
+                content={state.primary.tooltip}
+              >
+                <div className="flex items-center justify-center w-full h-full p-3">
+                  <Icon
+                    name={state.primary.icon}
+                    className={classes.PrimaryIcon({
+                      ...state,
+                      primary: { isActive: isPrimaryActive },
+                    })}
+                  />
                 </div>
               </Tooltip>
             </div>
-            <div className={classes.Separator({ ...state })}></div>
-            <div className={classes.Secondary({ ...state })} onClick={onSecondaryClickHandler}>
+            <div
+              className={classes.Separator({
+                ...state,
+                primary: { isActive: isPrimaryActive },
+              })}
+            ></div>
+            <div
+              className={classes.Secondary({
+                ...state,
+                primary: { isActive: isPrimaryActive },
+              })}
+              onClick={onSecondaryClickHandler}
+            >
               <Tooltip
                 isDisabled={state.isExpanded || !secondary.tooltip}
                 content={secondary.tooltip}
                 className="h-full"
               >
-                <Icon name={secondary.icon} className={classes.SecondaryIcon({ ...state })} />
+                <Icon
+                  name={secondary.icon}
+                  className={classes.SecondaryIcon({
+                    ...state,
+                    primary: { isActive: isPrimaryActive },
+                  })}
+                />
               </Tooltip>
             </div>
           </div>
         </div>
+        {/* EXPANDED LIST OF OPTIONS */}
         <div className={classes.Content({ ...state })}>
           <ListMenu items={state.items} renderer={renderer} />
         </div>
@@ -126,21 +219,20 @@ const SplitButton = ({
 };
 
 const DefaultListItemRenderer = ({ icon, label, isActive }) => (
-  <div className={classNames(
-    'flex flex-row items-center p-3 h-8 w-full hover:bg-primary-dark',
-    isActive && 'bg-primary-dark'
-  )}
+  <div
+    className={classNames(
+      'flex flex-row items-center p-3 h-8 w-full hover:bg-primary-dark',
+      isActive && 'bg-primary-dark'
+    )}
   >
-    <span className='text-common-bright mr-4 text-base'>
-      <Icon name={icon} className='w-5 h-5 text-common-bright' />
+    <span className="mr-4 text-base text-common-bright">
+      <Icon name={icon} className="w-5 h-5 text-common-bright" />
     </span>
-    <span className='text-common-bright text-base mr-5'>
-      {label}
-    </span>
-  </div >
+    <span className="mr-5 text-base text-common-bright">{label}</span>
+  </div>
 );
 
-const noop = () => { };
+const noop = () => {};
 
 SplitButton.defaultProps = {
   isRadio: false,
@@ -148,47 +240,45 @@ SplitButton.defaultProps = {
   primary: {
     label: null,
     tooltip: null,
-    isActive: true,
-    onClick: noop
   },
   secondary: {
     icon: 'chevron-down',
     label: null,
     isActive: true,
-    tooltip: 'More Measure Tools'
+    tooltip: 'More Measure Tools',
   },
   items: [],
   renderer: DefaultListItemRenderer,
-  onClick: noop
 };
 
 SplitButton.propTypes = {
   primary: PropTypes.shape({
-    id: PropTypes.string,
+    id: PropTypes.string.isRequired,
     icon: PropTypes.string,
     label: PropTypes.string,
+    type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
     tooltip: PropTypes.string,
-    isActive: PropTypes.bool,
   }),
   secondary: PropTypes.shape({
     id: PropTypes.string,
     icon: PropTypes.string,
     label: PropTypes.string,
     tooltip: PropTypes.string,
-    isActive: PropTypes.bool
+    isActive: PropTypes.bool,
   }),
-  onClick: PropTypes.func,
   renderer: PropTypes.func,
   items: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,
       icon: PropTypes.string,
       label: PropTypes.string,
+      type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
       tooltip: PropTypes.string,
-      onClick: PropTypes.func,
       isActive: PropTypes.bool,
     })
-  )
+  ),
+  /** Callback function to inform ToolbarService of important events */
+  onInteraction: PropTypes.func.isRequired,
 };
 
 export default SplitButton;