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
2020-09-14 21:18:46 -04:00
1 parent 365ba2fa72
commit cae54b0779
@@ -2,6 +2,7 @@ import React from 'react';
 // Icons

 import arrowDown from './../../assets/icons/arrow-down.svg';
+import arrowLeft from './../../assets/icons/arrow-left.svg';
 import calendar from './../../assets/icons/calendar.svg';
 import cancel from './../../assets/icons/cancel.svg';
 import clipboard from './../../assets/icons/clipboard.svg';
@@ -13,6 +14,7 @@ import chevronLeft from './../../assets/icons/chevron-left.svg';
 import chevronRight from './../../assets/icons/chevron-right.svg';
 import eyeVisible from './../../assets/icons/eye-visible.svg';
 import eyeHidden from './../../assets/icons/eye-hidden.svg';
+import exclamation from './../../assets/icons/exclamation.svg';
 import externalLink from './../../assets/icons/external-link.svg';
 import groupLayers from './../../assets/icons/group-layers.svg';
 import info from './../../assets/icons/info.svg';
@@ -47,18 +49,18 @@ import toolAnnotate from './../../assets/icons/tool-annotate.svg';
 import toolBidirectional from './../../assets/icons/tool-bidirectional.svg';
 import toolElipse from './../../assets/icons/tool-elipse.svg';
 import toolLength from './../../assets/icons/tool-length.svg';
+import toolStackScroll from './../../assets/icons/tool-stack-scroll.svg';
+import toolMagnify from './../../assets/icons/tool-magnify.svg';
+import toolFlipHorizontal from './../../assets/icons/tool-flip-horizontal.svg';
+import toolInvert from './../../assets/icons/tool-invert.svg';
+import toolRotateRight from './../../assets/icons/tool-rotate-right.svg';
+import toolCine from './../../assets/icons/tool-cine.svg';
+import toolProbe from './../../assets/icons/tool-probe.svg';
+import toolAngle from './../../assets/icons/tool-angle.svg';
+import toolReset from './../../assets/icons/tool-reset.svg';
+import toolRectangle from './../../assets/icons/tool-rectangle.svg';

 /** Old OHIF */
-import oldBars from './../../assets/icons/old-bars.svg';
-import oldCircle from './../../assets/icons/old-circle.svg';
-import oldEllipseH from './../../assets/icons/old-ellipse-h.svg';
-import oldInvert from './../../assets/icons/old-invert.svg';
-import oldRotateRight from './../../assets/icons/old-rotate-right.svg';
-import oldYoutube from './../../assets/icons/old-youtube.svg';
-import oldDotCircle from './../../assets/icons/old-dot-circle.svg';
-import oldAngleLeft from './../../assets/icons/old-angle-left.svg';
-import oldReset from './../../assets/icons/old-reset.svg';
-import oldCircleO from './../../assets/icons/old-circle-o.svg';
 import oldTrash from './../../assets/icons/old-trash.svg';
 import oldPlay from './../../assets/icons/old-play.svg';
 import oldStop from './../../assets/icons/old-stop.svg';
@@ -80,6 +82,7 @@ const ICONS = {
  'group-layers': groupLayers,
  info: info,
  'info-link': infoLink,
+  'arrow-left': arrowLeft,
  'launch-arrow': launchArrow,
  'launch-info': launchInfo,
  link: link,
@@ -87,6 +90,7 @@ const ICONS = {
  lock: lock,
  'logo-ohif-small': logoOhifSmall,
  magnifier: magnifier,
+  exclamation: exclamation,
  'notificationwarning-diamond': notificationwarningDiamond,
  pencil: pencil,
  profile: profile,
@@ -110,18 +114,18 @@ const ICONS = {
  'tool-bidirectional': toolBidirectional,
  'tool-elipse': toolElipse,
  'tool-length': toolLength,
+  'tool-stack-scroll': toolStackScroll,
+  'tool-magnify': toolMagnify,
+  'tool-flip-horizontal': toolFlipHorizontal,
+  'tool-invert': toolInvert,
+  'tool-rotate-right': toolRotateRight,
+  'tool-cine': toolCine,
+  'tool-probe': toolProbe,
+  'tool-angle': toolAngle,
+  'tool-reset': toolReset,
+  'tool-rectangle': toolRectangle,

  /** Old OHIF */
-  'old-bars': oldBars,
-  'old-circle': oldCircle,
-  'old-ellipse-h': oldEllipseH,
-  'old-invert': oldInvert,
-  'old-rotate-right': oldRotateRight,
-  'old-youtube': oldYoutube,
-  'old-dot-circle': oldDotCircle,
-  'old-angle-left': oldAngleLeft,
-  'old-reset': oldReset,
-  'old-circle-o': oldCircleO,
  'old-trash': oldTrash,
  'old-play': oldPlay,
  'old-stop': oldStop,
@@ -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;
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';

 import { Button, Icon, Typography, InputGroup } from '../../components';
-import { useModal } from '../../contextProviders';

 const StudyListFilter = ({
  filtersMeta,
@@ -21,42 +20,17 @@ const StudyListFilter = ({
    });
  };
  const isSortingEnable = numOfStudies > 0 && numOfStudies <= 100;
-  const { show } = useModal();
-
-  const showLearnMoreContent = () => {
-    const modalContent = () => <div>Search Instructions</div>;
-
-    show({
-      content: modalContent,
-      title: 'Learn More',
-    });
-  };

  return (
    <React.Fragment>
      <div>
        <div className="bg-primary-dark">
-          <div className="container m-auto relative flex flex-col pt-5">
-            <div className="flex flex-row justify-between mb-5 px-12">
+          <div className="container relative flex flex-col pt-5 m-auto">
+            <div className="flex flex-row justify-between px-12 mb-5">
              <div className="flex flex-row">
-                <Typography variant="h4" className="text-primary-light mr-6">
+                <Typography variant="h4" className="mr-6 text-primary-light">
                  Study list
                </Typography>
-                <div className="flex flex-row items-end">
-                  <Button
-                    variant="text"
-                    size="small"
-                    color="inherit"
-                    className="text-primary-active"
-                    startIcon={<Icon name="info-link" className="w-2" />}
-                    onClick={showLearnMoreContent}
-                  >
-                    <span className="flex flex-col flex-1">
-                      <span>Learn more</span>
-                      <span className="opacity-50 pt-1 border-b border-primary-active"></span>
-                    </span>
-                  </Button>
-                </div>
              </div>
              <div className="flex flex-row">
                {isFiltering && (
@@ -64,7 +38,7 @@ const StudyListFilter = ({
                    rounded="full"
                    variant="outlined"
                    color="primary"
-                    className="text-primary-active border-primary-active mx-8"
+                    className="mx-8 text-primary-active border-primary-active"
                    startIcon={<Icon name="cancel" />}
                    onClick={clearFilters}
                  >
@@ -76,7 +50,7 @@ const StudyListFilter = ({
                </Typography>
                <Typography
                  variant="h6"
-                  className="text-common-light self-end pb-1"
+                  className="self-end pb-1 text-common-light"
                >
                  Studies
                </Typography>
@@ -89,7 +63,7 @@ const StudyListFilter = ({
        className="sticky z-10 border-b-4 border-black"
        style={{ top: '57px' }}
      >
-        <div className="bg-primary-dark pt-3 pb-3 ">
+        <div className="pt-3 pb-3 bg-primary-dark ">
          <InputGroup
            inputMeta={filtersMeta}
            values={filterValues}
@@ -101,7 +75,7 @@ const StudyListFilter = ({
        </div>
        {numOfStudies > 100 && (
          <div className="container m-auto">
-            <div className="bg-primary-main text-center text-base py-1 rounded-b">
+            <div className="py-1 text-base text-center rounded-b bg-primary-main">
              <p className="text-white">
                Filter list to 100 studies or less to enable sorting
              </p>
@@ -7,12 +7,19 @@ import { IconButton, Icon, Tooltip } from '../';
 const ToolbarButton = ({
  type,
  id,
-  isActive,
-  onClick,
  icon,
  label,
+  commandName,
+  commandOptions,
+  onInteraction,
  dropdownContent,
+  //
+  isActive: _isActive,
+  bState = {},
+  //
 }) => {
+  const { primaryToolId, toggles, groups } = bState;
+  const isActive = _isActive || (type === 'tool' && id === primaryToolId);
  const classes = {
    type: {
      primary: isActive
@@ -23,7 +30,6 @@ const ToolbarButton = ({
        : 'text-white hover:bg-secondary-dark hover:text-white focus:bg-secondary-dark focus:text-white',
    },
  };
-
  const shouldShowDropdown = !!isActive && !!dropdownContent;

  return (
@@ -36,7 +42,14 @@ const ToolbarButton = ({
        <IconButton
          variant={isActive ? 'contained' : 'text'}
          className={classnames('mx-1', classes.type[type])}
-          onClick={onClick}
+          onClick={() => {
+            onInteraction({
+              itemId: id,
+              interactionType: type,
+              commandName: commandName,
+              commandOptions: commandOptions,
+            });
+          }}
          key={id}
        >
          <Icon name={icon} />
@@ -49,15 +62,15 @@ const ToolbarButton = ({
 ToolbarButton.defaultProps = {
  dropdownContent: null,
  isActive: false,
-  type: 'primary',
+  type: 'action',
 };

 ToolbarButton.propTypes = {
  /* Influences background/hover styling */
-  type: PropTypes.oneOf(['primary', 'secondary']),
+  type: PropTypes.oneOf(['action', 'toggle', 'tool']),
  id: PropTypes.string.isRequired,
  isActive: PropTypes.bool,
-  onClick: PropTypes.func.isRequired,
+  onInteraction: PropTypes.func.isRequired,
  icon: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  /** Tooltip content can be replaced for a customized content by passing a node to this value. */
@@ -24,7 +24,14 @@ const arrowPositionStyle = {
  },
 };

-const Tooltip = ({ content, isSticky, position, tight, children, isDisabled }) => {
+const Tooltip = ({
+  content,
+  isSticky,
+  position,
+  tight,
+  children,
+  isDisabled,
+}) => {
  const [isActive, setIsActive] = useState(false);

  const handleMouseOver = () => {
@@ -43,7 +50,7 @@ const Tooltip = ({ content, isSticky, position, tight, children, isDisabled }) =

  return (
    <div
-      className="relative h-full"
+      className="relative"
      onMouseOver={handleMouseOver}
      onFocus={handleMouseOver}
      onMouseOut={handleMouseOut}
@@ -84,7 +91,7 @@ Tooltip.defaultProps = {
  tight: false,
  isSticky: false,
  position: 'bottom',
-  isDisabled: false
+  isDisabled: false,
 };

 Tooltip.propTypes = {
@@ -52,7 +52,9 @@ Viewport.propTypes = {
  studyData: PropTypes.shape({
    label: PropTypes.string.isRequired,
    isTracked: PropTypes.bool.isRequired,
+    /* Specific to SR Viewports only... */
    isLocked: PropTypes.bool.isRequired,
+    isRehydratable: PropTypes.bool.isRequired,
    studyDate: PropTypes.string.isRequired,
    currentSeries: PropTypes.number.isRequired,
    seriesDescription: PropTypes.string.isRequired,
@@ -28,6 +28,7 @@ import { Viewport } from '@ohif/ui';
        label: 'A',
        isTracked: true,
        isLocked: false,
+        isRehydratable: false,
        studyDate: '07-Sep-2011',
        currentSeries: 1,
        seriesDescription:
@@ -19,6 +19,8 @@ const ViewportActionBar = ({
  showPatientInfo: patientInfoVisibility,
  onSeriesChange,
  onDoubleClick,
+  //
+  onPillClick,
 }) => {
  const [showPatientInfo, setShowPatientInfo] = useState(patientInfoVisibility);

@@ -33,6 +35,8 @@ const ViewportActionBar = ({
    label,
    isTracked,
    isLocked,
+    isRehydratable,
+    useAltStyling,
    modality,
    studyDate,
    currentSeries,
@@ -52,7 +56,6 @@ const ViewportActionBar = ({

  const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo);
  const closePatientInfo = () => setShowPatientInfo(false);
-
  const showPatientInfoRef = useRef(null);
  const clickOutsideListener = useOnClickOutside(
    showPatientInfoRef,
@@ -71,30 +74,121 @@ const ViewportActionBar = ({

  const renderIconStatus = () => {
    if (modality === 'SR') {
-      const TooltipMessage = isLocked
-        ? () => (
-          <div>
-            This SR is locked. <br />
-              Measurements cannot be duplicated.
-          </div>
-        )
-        : () => <div>This SR is unlocked.</div>;
+      // 1 - Incompatible
+      // 2 - Locked
+      // 3 - Rehydratable / Open
+      const state =
+        isRehydratable && !isLocked ? 3 : isRehydratable && isLocked ? 2 : 1;
+      let ToolTipMessage = null;
+      let StatusIcon = null;
+
+      switch (state) {
+        case 1:
+          StatusIcon = () => (
+            <div
+              className="flex items-center justify-center -mr-1 rounded-full"
+              style={{
+                width: '18px',
+                height: '18px',
+                backgroundColor: '#98e5c1',
+                border: 'solid 1.5px #000000',
+              }}
+            >
+              <Icon
+                name="exclamation"
+                style={{ color: '#000', width: '12px', height: '12px' }}
+              />
+            </div>
+          );
+
+          ToolTipMessage = () => (
+            <div>
+              This structured report is not compatible
+              <br />
+              with this application.
+            </div>
+          );
+          break;
+        case 2:
+          StatusIcon = () => (
+            <div
+              className="flex items-center justify-center -mr-1 bg-black rounded-full"
+              style={{
+                width: '18px',
+                height: '18px',
+              }}
+            >
+              <Icon
+                name="lock"
+                style={{ color: '#05D97C', width: '8px', height: '11px' }}
+              />
+            </div>
+          );
+
+          ToolTipMessage = () => (
+            <div>
+              This structured report is currently read-only
+              <br />
+              because you are tracking measurements in
+              <br />
+              another viewport.
+            </div>
+          );
+          break;
+        case 3:
+          StatusIcon = () => (
+            <div
+              className="flex items-center justify-center -mr-1 bg-white rounded-full group-hover:bg-customblue-200"
+              style={{
+                width: '18px',
+                height: '18px',
+                border: 'solid 1.5px #000000',
+              }}
+            >
+              <Icon
+                name="arrow-left"
+                style={{ color: '#000', width: '14px', height: '14px' }}
+              />
+            </div>
+          );
+
+          ToolTipMessage = () => <div>Click to restore measurements.</div>;
+      }
+
+      const StatusPill = () => (
+        <div
+          className={classnames(
+            'group relative flex items-center justify-center px-2 rounded-full cursor-default bg-customgreen-100',
+            {
+              'hover:bg-customblue-100': state === 3,
+              'cursor-pointer': state === 3,
+            }
+          )}
+          style={{
+            height: '24px',
+            width: '55px',
+          }}
+          onClick={() => {
+            if (state === 3) {
+              onPillClick?.();
+            }
+          }}
+        >
+          <span className="pr-1 text-lg font-bold leading-none text-black">
+            SR
+          </span>
+          <StatusIcon />
+        </div>
+      );
+
      return (
        <>
-          <Tooltip content={<TooltipMessage />} position="bottom-left">
-            <div className="relative flex p-1 border rounded cursor-default border-primary-light">
-              <span className="text-sm font-bold leading-none text-primary-light">
-                SR
-              </span>
-              {isLocked && (
-                <Icon
-                  name="lock"
-                  className="absolute w-3 text-white"
-                  style={{ top: -6, right: -6 }}
-                />
-              )}
-            </div>
-          </Tooltip>
+          {ToolTipMessage && (
+            <Tooltip content={<ToolTipMessage />} position="bottom-left">
+              <StatusPill />
+            </Tooltip>
+          )}
+          {!ToolTipMessage && <StatusPill />}
        </>
      );
    }
@@ -119,13 +213,13 @@ const ViewportActionBar = ({
                      can be viewed <br /> in the measurement panel
                    </>
                  ) : (
-                      <>
-                        Measurements for
+                    <>
+                      Measurements for
                      <span className="font-bold text-white"> untracked </span>
                      series <br /> will not be shown in the <br /> measurements
                      panel
                    </>
-                    )}
+                  )}
                </span>
              </div>
            </div>
@@ -137,15 +231,26 @@ const ViewportActionBar = ({
    );
  };

+  const borderColor = useAltStyling ? '#365A6A' : '#1D205A';
+  const backgroundColor = useAltStyling
+    ? '#031923'
+    : isTracked
+    ? '#020424'
+    : null;
+
  return (
    <div
-      className="flex flex-wrap items-center p-2 border-b select-none border-primary-light -mt-2"
+      className="flex flex-wrap items-center p-2 -mt-2 border-b select-none"
+      style={{
+        borderColor: borderColor,
+        backgroundColor: backgroundColor,
+      }}
      onDoubleClick={onDoubleClick}
    >
-      <div className="flex flex-grow min-w-48 flex-1 mt-2">
+      <div className="flex flex-1 flex-grow mt-2 min-w-48">
        <div className="flex items-center">
+          <span className="mr-2 text-white text-large">{label}</span>
          {renderIconStatus()}
-          <span className="ml-2 text-white text-large">{label}</span>
        </div>
        <div className="flex flex-col justify-start ml-4">
          <div className="flex">
@@ -173,14 +278,14 @@ const ViewportActionBar = ({
          <ButtonGroup>
            <Button
              size="initial"
-              className="px-2 py-1"
+              className="px-2 py-1 bg-black"
              onClick={() => onSeriesChange('left')}
            >
              <Icon name="chevron-left" className="w-4 text-white" />
            </Button>
            <Button
              size="initial"
-              className="px-2 py-1"
+              className="px-2 py-1 bg-black"
              onClick={() => onSeriesChange('right')}
            >
              <Icon name="chevron-right" className="w-4 text-white" />
@@ -189,11 +294,11 @@ const ViewportActionBar = ({
        </div>
      )}
      {showCine && !showNavArrows && (
-        <div className="mt-2 min-w-48 max-w-48 mr-auto">
+        <div className="mt-2 mr-auto min-w-48 max-w-48">
          <CinePlayer {...cineProps} />
        </div>
      )}
-      <div className="flex h-8 ml-4 mr-2 mt-2" onClick={onPatientInfoClick}>
+      <div className="flex h-8 mt-2 ml-4 mr-2" onClick={onPatientInfoClick}>
        <PatientInfo
          showPatientInfoRef={showPatientInfoRef}
          isOpen={showPatientInfo}
@@ -217,9 +322,12 @@ ViewportActionBar.propTypes = {
  cineProps: PropTypes.object,
  showPatientInfo: PropTypes.bool,
  studyData: PropTypes.shape({
+    //
+    useAltStyling: PropTypes.bool,
+    //
    label: PropTypes.string.isRequired,
    isTracked: PropTypes.bool.isRequired,
-    isLocked: PropTypes.bool.isRequired,
+    isRehydratable: PropTypes.bool.isRequired,
    studyDate: PropTypes.string.isRequired,
    currentSeries: PropTypes.number.isRequired,
    seriesDescription: PropTypes.string.isRequired,
@@ -22,11 +22,12 @@ import { ViewportActionBar } from '@ohif/ui';
 <Playground>
  <div className="p-4 h-64">
    <ViewportActionBar
-      onSeriesChange={(direction) => alert(`Series ${direction}`)}
+      onSeriesChange={direction => alert(`Series ${direction}`)}
      studyData={{
        label: 'A',
        isTracked: true,
        isLocked: false,
+        isRehydratable: false,
        studyDate: '07-Sep-2010',
        currentSeries: 1,
        seriesDescription:
@@ -45,42 +46,42 @@ import { ViewportActionBar } from '@ohif/ui';
    />
  </div>
 </Playground>
-
 <Playground>
  <div className="p-4 h-64">
    <ViewportActionBar
-      onSeriesChange={(direction) => alert(`Series ${direction}`)}
-      studyData={{
-        label: 'A',
-        isTracked: false,
-        isLocked: true,
-        studyDate: '07-Sep-2010',
-        currentSeries: 1,
-        seriesDescription:
-          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
-        modality: 'CT',
-        patientInformation: {
-          patientName: 'Smith, Jane',
-          patientSex: 'F',
-          patientAge: '59',
-          MRN: '10000001',
-          thickness: '2.0mm',
-          spacing: '1.25mm',
-          scanner: 'Aquilion',
-        },
-      }}
-    />
-  </div>
-</Playground>
-
-<Playground>
-  <div className="p-4 h-64">
-    <ViewportActionBar
-      onSeriesChange={(direction) => alert(`Series ${direction}`)}
+      onSeriesChange={direction => alert(`Series ${direction}`)}
      studyData={{
        label: 'A',
        isTracked: false,
        isLocked: false,
+        isRehydratable: true,
+        studyDate: '07-Sep-2010',
+        currentSeries: 1,
+        seriesDescription:
+          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
+        modality: 'CT',
+        patientInformation: {
+          patientName: 'Smith, Jane',
+          patientSex: 'F',
+          patientAge: '59',
+          MRN: '10000001',
+          thickness: '2.0mm',
+          spacing: '1.25mm',
+          scanner: 'Aquilion',
+        },
+      }}
+    />
+  </div>
+</Playground>
+<Playground>
+  <div className="p-4 h-64">
+    <ViewportActionBar
+      onSeriesChange={direction => alert(`Series ${direction}`)}
+      studyData={{
+        label: 'A',
+        isTracked: false,
+        isLocked: false,
+        isRehydratable: false,
        studyDate: '07-Sep-2010',
        currentSeries: 1,
        seriesDescription:
@@ -99,15 +100,15 @@ import { ViewportActionBar } from '@ohif/ui';
    />
  </div>
 </Playground>
-
 <Playground>
  <div className="p-4 h-64">
    <ViewportActionBar
-      onSeriesChange={(direction) => alert(`Series ${direction}`)}
+      onSeriesChange={direction => alert(`Series ${direction}`)}
      studyData={{
        label: 'A',
        isTracked: false,
-        isLocked: true,
+        isLocked: false,
+        isRehydratable: true,
        studyDate: '07-Sep-2010',
        currentSeries: 1,
        seriesDescription: