fix: UI tweaks to satisfy OHIF-161, OHIF-254, OHIF-167, OHIF-249, OHIF-170, OHIF-162

* add group hover for borderColor

* measurements action buttons hover state

* fixes and button/buttongroup/iconButton refactor

* OHIF-161: Fix Tracked/Untracked Text in Thumbnail's Tooltip

* OHIF-254: Format SR series date

* OHIF-167 - Fix Study Date Time format

* OHIF-249: Fix viewport border thickness and action bar min height

* pass viewportIdentificator to SR Thumbnail

* show tooltip when hover over the SR thumbnail

* OHIF-170: Display tooltip when hovering over an untracked series in the Viewport Action Bar

* Undo accidental date change

* Sneak in "Create Report" messaging for createReport notifications

* Fix text clipping

* Add no-select text styles for action bar, thumbnail, and thumbnail no image (sr)

* fix for OHIF-162

Modified to remove Viewport Identifier. Text now only reads: “Structured Report”This was partly to address a bug where the Viewport Identifier was incorrect for all but the first displayed SR. Component API changed for ThumbnailNoImage to accomodate any generic “modalityTooltip”

* Some ViewportPane resize magic

Co-authored-by: dannyrb <danny.ri.brown@gmail.com>

extensions/measurement-tracking/src/_shared/createReportAsync.js

@@ -25,13 +25,13 @@ async function createReportAsync(servicesManager, dataSource, measurements) {
       madeInClient: true,
     });
     UINotificationService.show({
-      title: 'STOW SR',
+      title: 'Create Report',
       message: 'Measurements saved successfully',
       type: 'success',
     });
   } catch (error) {
     UINotificationService.show({
-      title: 'STOW SR',
+      title: 'Create Report',
       message: error.message || 'Failed to store measurements',
       type: 'error',
     });

extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/ActionButtons.jsx

@@ -5,27 +5,22 @@ import { Button, ButtonGroup, Icon, IconButton } from '@ohif/ui';
 function ActionButtons({ onExportClick, onCreateReportClick }) {
   return (
     <React.Fragment>
-      <ButtonGroup onClick={onExportClick}>
+      <ButtonGroup color="black" onClick={onExportClick} size="inherit">
-        <Button
+        <Button className="text-base px-2 py-2">Export</Button>
-          className="px-2 py-2 text-base text-white bg-black border-primary-main"
-          size="initial"
-          color="inherit"
-        >
-          Export
-        </Button>
         <IconButton
-          className="px-2 text-white bg-black border-primary-main"
+          className="px-2"
-          color="inherit"
+          color="black"
           size="initial"
+          variant="outlined"
         >
           <Icon name="arrow-down" />
         </IconButton>
       </ButtonGroup>
       <Button
-        className="px-2 py-2 ml-2 text-base text-white bg-black border border-primary-main"
+        className="ml-2 text-base"
         variant="outlined"
-        size="initial"
+        size="small"
-        color="inherit"
+        color="black"
         onClick={onCreateReportClick}
       >
         Create Report

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx

@@ -381,7 +381,7 @@ function _mapDisplaySets(
       description: ds.SeriesDescription,
       seriesNumber: ds.SeriesNumber,
       modality: ds.Modality,
-      seriesDate: ds.SeriesDate,
+      seriesDate: formatDate(ds.SeriesDate),
       numInstances: ds.numImageFrames,
       StudyInstanceUID: ds.StudyInstanceUID,
       componentType,

platform/ui/src/components/Button/Button.jsx

@@ -38,6 +38,8 @@ const variantClasses = {
       'text-secondary-light hover:bg-secondary-light hover:text-white active:opacity-80 focus:bg-secondary-light focus:text-white',
     white:
       'text-white hover:bg-white hover:text-black active:opacity-80 focus:bg-white focus:text-black',
+    black:
+      'text-black hover:bg-black hover:text-white focus:bg-black focus:text-white active:opacity-80',
   },
   outlined: {
     default:
@@ -48,6 +50,8 @@ const variantClasses = {
       'border bg-transparent border-secondary-light text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
     white:
       'border bg-transparent border-white text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+    black:
+      'border bg-black border-primary-main text-white hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
   },
   contained: {
     default:
@@ -58,6 +62,8 @@ const variantClasses = {
       'bg-secondary-light text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     white:
       'bg-white text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
+    black:
+      'bg-black text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
   },
 };
 
@@ -104,7 +110,7 @@ const Button = ({
   );
   const buttonElement = useRef(null);
 
-  const handleOnClick = (e) => {
+  const handleOnClick = e => {
     buttonElement.current.blur();
     if (rest.onClick) {
       rest.onClick(e);
@@ -144,6 +150,7 @@ Button.propTypes = {
     'primary',
     'secondary',
     'white',
+    'black',
     'inherit',
   ]),
   fullWidth: PropTypes.bool,

platform/ui/src/components/ButtonGroup/ButtonGroup.jsx

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const baseButtonClass = 'border';
+const baseButtonClass = 'border outline-none';
 const roundedClasses = {
   vertical: {
     none: '',
@@ -41,18 +41,22 @@ const variantClasses = {
     primary: 'border-primary-main',
     secondary: 'border-secondary-light',
     white: 'border-white',
+    black: 'border-primary-main',
   },
   outlined: {
     default: '',
     primary: '',
     secondary: '',
     white: '',
+    black:
+      'border-primary-main group-hover:bg-primary-main group-hover:border-black',
   },
   contained: {
     default: 'border-white',
     primary: 'border-white',
     secondary: 'border-white',
     white: 'border-black',
+    black: 'border-primary-main',
   },
 };
 
@@ -89,6 +93,7 @@ const ButtonGroup = ({
     <div
       role="group"
       className={classnames(
+        'group',
         className,
         orientationClasses[orientation],
         fullWidth ? fullWidthDisplayClass : baseDisplayClass
@@ -96,7 +101,7 @@ const ButtonGroup = ({
       ref={ref}
       {...other}
     >
-      {React.Children.map(children, (child) => {
+      {React.Children.map(children, child => {
         if (!React.isValidElement(child)) {
           return null;
         }
@@ -118,7 +123,14 @@ const ButtonGroup = ({
 ButtonGroup.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
-  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
+  color: PropTypes.oneOf([
+    'default',
+    'inherit',
+    'primary',
+    'secondary',
+    'white',
+    'black',
+  ]),
   disabled: PropTypes.bool,
   fullWidth: PropTypes.bool,
   orientation: PropTypes.oneOf(['vertical', 'horizontal']),

platform/ui/src/components/IconButton/IconButton.jsx

@@ -28,6 +28,8 @@ const variantClasses = {
       'text-secondary-light hover:bg-secondary-light hover:text-white active:opacity-80 focus:bg-secondary-light focus:text-white',
     white:
       'text-white hover:bg-white hover:text-black active:opacity-80 focus:bg-white focus:text-black',
+    black:
+      'text-black hover:bg-black hover:text-white focus:bg-black focus:text-white active:opacity-80',
   },
   outlined: {
     default:
@@ -38,6 +40,8 @@ const variantClasses = {
       'border bg-transparent border-secondary-light text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
     white:
       'border bg-transparent border-white text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+    black:
+      'border bg-black border-primary-main text-white hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
   },
   contained: {
     default:
@@ -48,6 +52,8 @@ const variantClasses = {
       'bg-secondary-light text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     white:
       'bg-white text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
+    black:
+      'bg-black text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
   },
 };
 
@@ -113,7 +119,7 @@ const IconButton = ({
 };
 
 IconButton.defaultProps = {
-  onClick: () => { },
+  onClick: () => {},
   color: 'default',
   disabled: false,
   fullWidth: false,
@@ -133,6 +139,7 @@ IconButton.propTypes = {
     'primary',
     'secondary',
     'white',
+    'black',
     'inherit',
   ]),
   fullWidth: PropTypes.bool,

platform/ui/src/components/Thumbnail/Thumbnail.jsx

@@ -39,7 +39,7 @@ const Thumbnail = ({
       ref={thumbnailElement}
       className={classnames(
         className,
-        'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none group'
+        'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none select-none group'
       )}
       id={`thumbnail-${displaySetInstanceUID}`}
       onClick={onClick}

platform/ui/src/components/ThumbnailList/ThumbnailList.jsx

@@ -79,12 +79,14 @@ const ThumbnailList = ({
                   displaySetInstanceUID={displaySetInstanceUID}
                   dragData={dragData}
                   modality={modality}
+                  modalityTooltip={_getModalityTooltip(modality)}
                   seriesDate={seriesDate}
                   description={description}
                   onClick={() => onThumbnailClick(displaySetInstanceUID)}
                   onDoubleClick={() =>
                     onThumbnailDoubleClick(displaySetInstanceUID)
                   }
+                  viewportIdentificator={viewportIdentificator}
                 />
               );
             default:
@@ -132,4 +134,17 @@ ThumbnailList.propTypes = {
   onClickUntrack: PropTypes.func.isRequired,
 };
 
+// TODO: Support "Viewport Identificator"?
+function _getModalityTooltip(modality) {
+  if (_modalityTooltips.hasOwnProperty(modality)) {
+    return _modalityTooltips[modality];
+  }
+
+  return 'Unknown';
+}
+
+const _modalityTooltips = {
+  SR: 'Structured Report',
+};
+
 export default ThumbnailList;

platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { useDrag } from 'react-dnd';
-import { Icon } from '@ohif/ui';
+import { Icon, Tooltip, Typography } from '@ohif/ui';
 import blurHandlerListener from '../../utils/blurHandlerListener';
 
 const ThumbnailNoImage = ({
@@ -10,10 +10,12 @@ const ThumbnailNoImage = ({
   description,
   seriesDate,
   modality,
+  modalityTooltip,
   onClick,
   onDoubleClick,
   dragData,
   isActive,
+  viewportIdentificator = '',
 }) => {
   const [collectedProps, drag, dragPreview] = useDrag({
     item: { ...dragData },
@@ -29,7 +31,7 @@ const ThumbnailNoImage = ({
       ref={thumbnailElement}
       onFocus={() => blurHandlerListener(thumbnailElement)}
       className={classnames(
-        'flex flex-row flex-1 px-4 py-3 cursor-pointer outline-none border-transparent hover:border-blue-300 focus:border-blue-300 rounded',
+        'flex flex-row flex-1 px-4 py-3 cursor-pointer outline-none border-transparent hover:border-blue-300 focus:border-blue-300 rounded select-none',
         isActive ? 'border-2 border-primary-light' : 'border'
       )}
       id={`thumbnail-${displaySetInstanceUID}`}
@@ -42,10 +44,15 @@ const ThumbnailNoImage = ({
         <div className="flex flex-col flex-1">
           <div className="flex flex-row items-center flex-1 mb-2">
             <Icon name="list-bullets" className="w-12 text-secondary-light" />
-            <div className="px-3 mr-4 text-lg text-white rounded-sm bg-primary-main">
+            <Tooltip
-              {modality}
+              position="bottom"
-            </div>
+              content={<Typography>{modalityTooltip}</Typography>}
-            <span className="text-base text-blue-300">{seriesDate}</span>
+            >
+              <div className="px-3 text-lg text-white rounded-sm bg-primary-main">
+                {modality}
+              </div>
+            </Tooltip>
+            <span className="ml-4 text-base text-blue-300">{seriesDate}</span>
           </div>
           <div className="ml-12 text-base text-white break-all">
             {description}
@@ -71,10 +78,13 @@ ThumbnailNoImage.propTypes = {
   }),
   description: PropTypes.string.isRequired,
   modality: PropTypes.string.isRequired,
+  /* Tooltip message to display when modality text is hovered */
+  modalityTooltip: PropTypes.string.isRequired,
   seriesDate: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   onDoubleClick: PropTypes.func.isRequired,
   isActive: PropTypes.bool.isRequired,
+  viewportIdentificator: PropTypes.string,
 };
 
 export default ThumbnailNoImage;

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx

@@ -43,7 +43,10 @@ const ThumbnailTracked = ({
               <div className="flex flex-row flex-1">
                 <div className="flex flex-col flex-1 pr-4">
                   <span>
-                    Series is <span className="text-white">tracked</span>
+                    Series is
+                    <span className="text-white">
+                      {isTracked ? ' tracked' : ' untracked'}
+                    </span>
                   </span>
                   {viewportIdentificator && (
                     <span>
@@ -73,7 +76,7 @@ const ThumbnailTracked = ({
         )}
       </div>
       <Thumbnail
-         displaySetInstanceUID={displaySetInstanceUID}
+        displaySetInstanceUID={displaySetInstanceUID}
         imageSrc={imageSrc}
         imageAltText={imageAltText}
         dragData={dragData}

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

@@ -80,37 +80,46 @@ const ViewportActionBar = ({
       );
     }
 
+    const trackedIcon = isTracked ? 'tracked' : 'dotted-circle';
+
     return (
       <div className="relative">
-        {!isTracked ? (
+        <Tooltip
-          <Icon name="dotted-circle" className="w-6 text-primary-light" />
+          position="bottom-left"
-        ) : (
+          content={
-          <Tooltip
+            <div className="flex py-2">
-            position="bottom-left"
+              <div className="flex pt-1">
-            content={
+                <Icon name="info-link" className="w-4 text-primary-main" />
-              <div className="flex py-2">
-                <div className="flex pt-1">
-                  <Icon name="info-link" className="w-4 text-primary-main" />
-                </div>
-                <div className="flex ml-4">
-                  <span className="text-base text-common-light">
-                    Series is
-                    <span className="font-bold text-white"> tracked</span> and
-                    can be viewed <br /> in the measurement panel
-                  </span>
-                </div>
               </div>
-            }
+              <div className="flex ml-4">
-          >
+                <span className="text-base text-common-light">
-            <Icon name="tracked" className="w-6 text-primary-light" />
+                  {isTracked ? (
-          </Tooltip>
+                    <>
-        )}
+                      Series is
+                      <span className="font-bold text-white"> tracked</span> and
+                      can be viewed <br /> in the measurement panel
+                    </>
+                  ) : (
+                    <>
+                      Measurements for
+                      <span className="font-bold text-white"> untracked </span>
+                      series <br /> will not be shown in the <br /> measurements
+                      panel
+                    </>
+                  )}
+                </span>
+              </div>
+            </div>
+          }
+        >
+          <Icon name={trackedIcon} className="w-6 text-primary-light" />
+        </Tooltip>
       </div>
     );
   };
 
   return (
-    <div className="flex items-center p-2 border-b border-primary-light">
+    <div className="flex items-center p-2 border-b select-none border-primary-light min-h-12">
       <div className="flex flex-grow">
         <div className="flex items-center">
           {renderIconStatus()}

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

@@ -64,11 +64,18 @@ function ViewportPane({
         'flex flex-col',
         'rounded-lg hover:border-primary-light transition duration-300 outline-none overflow-hidden',
         {
-          'border-2 border-primary-light m-0': isActive,
+          'border-2 border-primary-light': isActive,
           'border border-secondary-light': !isActive,
         },
         className
       )}
+      // Normally, we'd use tailwindcss classes here, but margin and border classes use different units
+      // m-# (rem), border-# (px). To make sure we don't change the box size of our viewports
+      // and trigger a canvas resize, we have to use this little trick for margin.
+      // Assumes a :root font-fize of `16px`
+      style={{
+        margin: isActive ? '3px' : '4px',
+      }}
     >
       {children}
     </div>
@@ -90,7 +97,7 @@ ViewportPane.propTypes = {
   onInteraction: PropTypes.func.isRequired,
 };
 
-const noop = () => { };
+const noop = () => {};
 
 ViewportPane.defaultProps = {
   onInteraction: noop,

platform/ui/src/gatsby-theme-docz/tailwind.css

@@ -12,5 +12,5 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   line-height: 1.3;
-  height: 2rem;
+  height: 2.1rem;
 }

platform/ui/tailwind.config.js

@@ -330,7 +330,7 @@ module.exports = {
       full: '100%',
       viewport: '0.5rem',
       '1/2': '50%',
-      'viewport-scrollbar': '1.3rem'
+      'viewport-scrollbar': '1.3rem',
     },
     letterSpacing: {
       tighter: '-0.05em',
@@ -684,7 +684,7 @@ module.exports = {
     transitionProperty: {
       none: 'none',
       all: 'all',
-      'height': 'height',
+      height: 'height',
       default:
         'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
       colors: 'background-color, border-color, color, fill, stroke',
@@ -716,12 +716,26 @@ module.exports = {
     alignSelf: ['responsive'],
     appearance: ['responsive'],
     backgroundAttachment: ['responsive'],
-    backgroundColor: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
+    backgroundColor: [
+      'responsive',
+      'hover',
+      'focus',
+      'active',
+      'group-focus',
+      'group-hover',
+    ],
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],
     borderCollapse: ['responsive'],
-    borderColor: ['responsive', 'hover', 'focus', 'active', 'group-focus'],
+    borderColor: [
+      'responsive',
+      'hover',
+      'focus',
+      'active',
+      'group-focus',
+      'group-hover',
+    ],
     borderRadius: ['responsive', 'focus', 'first', 'last'],
     borderStyle: ['responsive', 'focus'],
     borderWidth: ['responsive', 'focus', 'first', 'last'],