Re #2259: UI refinements for warnings (#2397)

* Re #2259: highlight series thumbnails border for active series (series in the active viewport)
* Re #2259: add the warning icon also on the active viewport as an overlay

platform/ui/src/components/studyBrowser/ImageThumbnail.js

@@ -3,6 +3,7 @@ import './ImageThumbnail.styl';
 
 import { utils } from '@ohif/core';
 import React, { useState, useEffect, createRef } from 'react';
+import classNames from 'classnames';
 
 import PropTypes from 'prop-types';
 import ViewportErrorIndicator from '../../viewer/ViewportErrorIndicator';
@@ -15,6 +16,7 @@ import ViewportLoadingIndicator from '../../viewer/ViewportLoadingIndicator';
 //import cornerstone from 'cornerstone-core';
 function ImageThumbnail(props) {
   const {
+    active,
     width,
     height,
     imageSrc,
@@ -97,7 +99,7 @@ function ImageThumbnail(props) {
   }, [fetchImagePromise, image.imageId, imageId, purgeCancelablePromise, setImagePromise]);
 
   return (
-    <div className="ImageThumbnail">
+    <div className={classNames('ImageThumbnail', { active: active })}>
       <div className="image-thumbnail-canvas">
         {shouldRenderToCanvas() ? (
           <canvas ref={canvasRef} width={width} height={height} />
@@ -126,6 +128,7 @@ function ImageThumbnail(props) {
 }
 
 ImageThumbnail.propTypes = {
+  active: PropTypes.bool,
   imageSrc: PropTypes.string,
   imageId: PropTypes.string,
   error: PropTypes.bool,
@@ -135,6 +138,7 @@ ImageThumbnail.propTypes = {
 };
 
 ImageThumbnail.defaultProps = {
+  active: false,
   error: false,
   stackPercentComplete: 0,
   width: 217,

platform/ui/src/components/studyBrowser/ImageThumbnail.styl

@@ -6,7 +6,7 @@
   --sidebar-transition: all 0.3s ease;
 }
 
-.ThumbnailEntry.active .ImageThumbnail
+.ImageThumbnail.active
   border-color: var(--active-color);
   box-shadow: none
   transition: var(--sidebar-transition);
@@ -14,7 +14,7 @@
 .ImageThumbnail
   background-color: var(--primary-background-color);
   box-shadow: inset 0 0 0 1px var(--ui-border-color-dark);
-  border: 5px solid transparent
+  border: 2px solid transparent
   border-radius: 12px
   height: 135px
   margin: 0 auto

platform/ui/src/components/studyBrowser/StudyBrowser.js

@@ -20,6 +20,7 @@ function StudyBrowser(props) {
             return study.thumbnails.map((thumb, thumbIndex) => {
               // TODO: Thumb has more props than we care about?
               const {
+                active,
                 altImageText,
                 displaySetInstanceUID,
                 imageId,
@@ -38,6 +39,7 @@ function StudyBrowser(props) {
                   data-cy="thumbnail-list"
                 >
                   <Thumbnail
+                    active={active}
                     supportsDrag={supportsDrag}
                     key={`${studyIndex}_${thumbIndex}`}
                     id={`${studyIndex}_${thumbIndex}`} // Unused?

platform/ui/src/components/studyBrowser/Thumbnail.js

@@ -16,13 +16,13 @@ function ThumbnailFooter({
   numImageFrames,
   hasWarnings
 }) {
-  const [warningList, warningListSet] = useState([]);
+  const [inconsistencyWarnings, inconsistencyWarningsSet] = useState([]);
 
   useEffect(() => {
     let unmounted = false
     hasWarnings.then(response => {
       if (!unmounted) {
-        warningListSet(response)
+        inconsistencyWarningsSet(response)
       }
     })
     return () => {
@@ -41,22 +41,22 @@ function ThumbnailFooter({
     );
   };
 
-  const getWarningContent = (warningList) => {
-    if (Array.isArray(warningList)) {
-      const listedWarnings = warningList.map((warn, index) => {
+  const getWarningContent = (inconsistencyWarnings) => {
+    if (Array.isArray(inconsistencyWarnings)) {
+      const listedWarnings = inconsistencyWarnings.map((warn, index) => {
         return <li key={index}>{warn}</li>;
       });
 
       return <ol>{listedWarnings}</ol>;
     } else {
-      return <React.Fragment>{warningList}</React.Fragment>;
+      return <React.Fragment>{inconsistencyWarnings}</React.Fragment>;
     }
   };
 
-  const getWarningInfo = (SeriesNumber, warningList) => {
+  const getWarningInfo = (SeriesNumber, inconsistencyWarnings) => {
       return(
         <React.Fragment>
-        {warningList.length != 0 ? (
+        {inconsistencyWarnings && inconsistencyWarnings.length != 0 ? (
           <OverlayTrigger
             key={SeriesNumber}
             placement="left"
@@ -67,7 +67,7 @@ function ThumbnailFooter({
                 id="tooltip-left"
               >
                 <div className="warningTitle">Series Inconsistencies</div>
-                <div className="warningContent">{getWarningContent(warningList)}</div>
+                <div className="warningContent">{getWarningContent(inconsistencyWarnings)}</div>
               </Tooltip>
             }
           >
@@ -87,7 +87,7 @@ function ThumbnailFooter({
     SeriesNumber,
     InstanceNumber,
     numImageFrames,
-    warningList
+    inconsistencyWarnings
   ) => {
     if (!SeriesNumber && !InstanceNumber && !numImageFrames) {
       return;
@@ -97,7 +97,7 @@ function ThumbnailFooter({
         {getInfo(SeriesNumber, 'S:')}
         {getInfo(InstanceNumber, 'I:')}
         {getInfo(numImageFrames, '', 'image-frames')}
-        {getWarningInfo(SeriesNumber, warningList)}
+        {getWarningInfo(SeriesNumber, inconsistencyWarnings)}
       </div>
 
     return (seriesInformation);
@@ -106,7 +106,7 @@ function ThumbnailFooter({
   return (
     <div className={classNames('series-details', { 'info-only': infoOnly })}>
       <div className="series-description">{SeriesDescription}</div>
-      {getSeriesInformation(SeriesNumber, InstanceNumber, numImageFrames, warningList)}
+      {getSeriesInformation(SeriesNumber, InstanceNumber, numImageFrames, inconsistencyWarnings)}
     </div>
   );
 }
@@ -159,6 +159,7 @@ function Thumbnail(props) {
       {/* SHOW IMAGE */}
       {hasImage && (
         <ImageThumbnail
+          active={active}
           imageSrc={imageSrc}
           imageId={imageId}
           error={error}

platform/ui/src/components/studyBrowser/Thumbnail.styl

@@ -2,8 +2,15 @@
 
 :root {
   --series-count-background-color: #678696;
+  --active-color: #20A5D6;
 }
 
+.thumbnail.active
+  .alt-image-text
+    border-color: var(--active-color);
+    box-shadow: none
+    transition: var(--sidebar-transition);
+
 .thumbnail
   cursor: pointer
   display: table
@@ -16,7 +23,7 @@
     justify-content: center;
     background-color: var(--primary-background-color);
     box-shadow: inset 0 0 0 1px var(--ui-border-color-dark);
-    border: 5px solid transparent;
+    border: 2px solid transparent;
     border-radius: 12px;
     height: 135px;
     margin: 0 auto;