Complete rehydration.

platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.jsx

@@ -21,13 +21,21 @@ const InputLabelWrapper = ({
   className,
   children,
 }) => {
+  const onClickHandler = e => {
+    if (!isSortable) {
+      return;
+    }
+
+    onLabelClick(e);
+  };
+
   return (
     <label className={classnames(baseLabelClassName, className)}>
       <span
         role="button"
         className={spanClassName}
-        onClick={onLabelClick}
-        onKeyDown={onLabelClick}
+        onClick={onClickHandler}
+        onKeyDown={onClickHandler}
         tabIndex="0"
       >
         {label}

platform/ui/src/components/Notification/Notification.jsx

@@ -1,16 +1,35 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { Button, Icon } from '@ohif/ui';
 
-const Notification = ({ type, message, actions, onSubmit }) => {
+const Notification = ({ type, message, actions, onSubmit, onOutsideClick }) => {
+  const notificationRef = useRef(null);
+
+  useEffect(() => {
+    const notificationElement = notificationRef.current;
+    const handleClick = function(event) {
+      const isClickInside = notificationElement.contains(event.target);
+
+      if (!isClickInside) {
+        onOutsideClick();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, [onOutsideClick]);
+
   const iconsByType = {
     error: {
       icon: 'info',
       color: 'text-red-700',
     },
     warning: {
-      icon: 'info',
+      icon: 'notificationwarning-diamond',
       color: 'text-yellow-500',
     },
     info: {
@@ -35,7 +54,10 @@ const Notification = ({ type, message, actions, onSubmit }) => {
   const { icon, color } = getIconData();
 
   return (
-    <div className="flex flex-col p-2 mx-2 mt-2 rounded bg-common-bright">
+    <div
+      ref={notificationRef}
+      className="flex flex-col p-2 mx-2 mt-2 rounded bg-common-bright"
+    >
       <div className="flex flex-grow">
         <Icon name={icon} className={classnames('w-5', color)} />
         <span className="ml-2 text-base text-black">{message}</span>
@@ -65,6 +87,7 @@ const Notification = ({ type, message, actions, onSubmit }) => {
 
 Notification.defaultProps = {
   type: 'info',
+  onOutsideClick: () => {},
 };
 
 Notification.propTypes = {
@@ -78,6 +101,8 @@ Notification.propTypes = {
     })
   ).isRequired,
   onSubmit: PropTypes.func.isRequired,
+  /** Can be used as a callback to dismiss the notification for clicks that occur outside of it */
+  onOutsideClick: PropTypes.func,
 };
 
 export default Notification;

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

@@ -250,7 +250,7 @@ function PatientInfo({
                     Thickness
                   </span>
                   <span className={classnames(classes.infoText)}>
-                    {thickness}
+                    {thickness ? thickness : 'N/A'}
                   </span>
                 </div>
                 <div className={classnames(classes.row)}>

platform/ui/src/components/ViewportPane/ViewportPane.jsx

@@ -14,6 +14,7 @@ function ViewportPane({
   onInteraction,
   acceptDropsFor,
 }) {
+  let dropElement = null;
   const [{ isHovered, isHighlighted }, drop] = useDrop({
     accept: acceptDropsFor,
     // TODO: pass in as prop?
@@ -22,7 +23,7 @@ function ViewportPane({
       const isOver = monitor.isOver();
 
       if (canDrop && isOver && onDrop) {
-        onInteraction();
+        onInteractionHandler();
         onDrop(droppedItem);
       }
     },
@@ -33,16 +34,32 @@ function ViewportPane({
     }),
   });
 
+  const focus = () => {
+    if (dropElement) {
+      dropElement.focus();
+    }
+  };
+
+  const onInteractionHandler = () => {
+    onInteraction();
+    focus();
+  };
+
+  const refHandler = element => {
+    drop(element);
+    dropElement = element;
+  };
+
   return (
     <div
-      ref={drop}
-      // onInteraction...
+      ref={refHandler}
+      // onInteractionHandler...
       // https://reactjs.org/docs/events.html#mouse-events
       // https://stackoverflow.com/questions/8378243/catch-scrolling-event-on-overflowhidden-element
-      onMouseDown={onInteraction}
-      onClick={onInteraction}
-      onScroll={onInteraction}
-      onWheel={onInteraction}
+      onMouseDown={onInteractionHandler}
+      onClick={onInteractionHandler}
+      onScroll={onInteractionHandler}
+      onWheel={onInteractionHandler}
       className={classnames(
         'flex flex-col',
         'rounded-lg hover:border-primary-light transition duration-300 outline-none overflow-hidden',
@@ -73,7 +90,7 @@ ViewportPane.propTypes = {
   onInteraction: PropTypes.func.isRequired,
 };
 
-const noop = () => {};
+const noop = () => { };
 
 ViewportPane.defaultProps = {
   onInteraction: noop,

platform/ui/src/contextProviders/ViewportDialogProvider.jsx

@@ -18,6 +18,9 @@ const DEFAULT_STATE = {
   onSubmit: () => {
     console.log('btn value?');
   },
+  onOutsideClick: () => {
+    console.warn('default: onOutsideClick')
+  },
   onDismiss: () => {
     console.log('dismiss? -1');
   },

platform/ui/tailwind.config.js

@@ -328,6 +328,8 @@ module.exports = {
       '0': '0',
       auto: 'auto',
       full: '100%',
+      viewport: '0.5rem',
+      'viewport-scrollbar': '1.3rem'
     },
     letterSpacing: {
       tighter: '-0.05em',