From 11e58e70f673a12c4dbd678cca61efa06332ece3 Mon Sep 17 00:00:00 2001
From: Gustavo Lelis <galelis@gmail.com>
Date: Thu, 23 Apr 2020 19:23:37 -0300
Subject: [PATCH] Implement tooltip on remaining paces

---
 .../MeasurementTable/MeasurementTable.jsx     |  2 +
 .../SegmentationTable/SegmentationTable.jsx   | 22 +++--
 .../ThumbnailTracked/ThumbnailTracked.jsx     | 66 +++++--------
 .../ui/src/components/Tooltip/Tooltip.jsx     | 30 +++---
 .../ViewportActionBar/ViewportActionBar.jsx   | 97 ++++++++-----------
 .../components/ViewportGrid/ViewportGrid.jsx  |  2 +-
 6 files changed, 100 insertions(+), 119 deletions(-)

diff --git a/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx b/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
index 2f620780f..8afcd8291 100644
--- a/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
+++ b/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
@@ -28,6 +28,7 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
                 onClick={() => onClick(measurementItem.id)}
                 onKeyDown={() => onClick(measurementItem.id)}
                 role="button"
+                tabIndex="0"
               >
                 <div
                   className={classnames(
@@ -60,6 +61,7 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
                       right: 4,
                       transform: isActive ? '' : 'translateX(100%)',
                     }}
+                    e
                     onClick={(e) => {
                       // stopPropagation needed to avoid disable the current active item
                       e.stopPropagation();
diff --git a/platform/ui/src/components/SegmentationTable/SegmentationTable.jsx b/platform/ui/src/components/SegmentationTable/SegmentationTable.jsx
index 743aa210f..fd1cbb4ea 100644
--- a/platform/ui/src/components/SegmentationTable/SegmentationTable.jsx
+++ b/platform/ui/src/components/SegmentationTable/SegmentationTable.jsx
@@ -43,6 +43,16 @@ const SegmentationTable = ({ title, amount, data }) => {
             const itemKey = i;
             const currentItem = i + 1;
             const isActive = !!activeItem && activeItem[title] === i;
+
+            const handleOnClick = () => {
+              setActiveItem((s) => {
+                return {
+                  ...s,
+                  [title]: s && s[title] === itemKey ? null : itemKey,
+                };
+              });
+            };
+
             return (
               <div
                 key={i}
@@ -52,14 +62,10 @@ const SegmentationTable = ({ title, amount, data }) => {
                     'border-primary-light': isActive,
                   }
                 )}
-                onClick={() => {
-                  setActiveItem((s) => {
-                    return {
-                      ...s,
-                      [title]: s && s[title] === itemKey ? null : itemKey,
-                    };
-                  });
-                }}
+                onClick={handleOnClick}
+                onKeyDown={handleOnClick}
+                role="button"
+                tabIndex="0"
               >
                 <div
                   className={classnames(
diff --git a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx
index e979c3aab..40e46e511 100644
--- a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx
+++ b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Icon, Thumbnail } from '@ohif/ui';
+import { Icon, Thumbnail, Tooltip } from '@ohif/ui';
 
 const ThumbnailTracked = ({
   className,
@@ -29,51 +29,37 @@ const ThumbnailTracked = ({
         <div
           className={classnames(
             'flex flex-col items-center justify-start p-2 mb-2 relative cursor-pointer',
-            isTracked && 'rounded-sm hover:bg-gray-900 showTooltipOnHover'
+            isTracked && 'rounded-sm hover:bg-gray-900'
           )}
         >
-          <Icon name={trackedIcon} className="text-primary-light mb-2 w-4" />
-          <div className="text-white text-xl leading-tight h-5">
-            {viewportIdentificator}
-          </div>
-          <div
-            className={classnames(
-              'tooltip tooltip-right bg-black border border-secondary-main text-common-light text-base rounded py-2 px-4 top-0 w-max-content hidden'
-            )}
-          >
-            <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>
-                </span>
-                {viewportIdentificator && (
+          <Tooltip
+            position="right"
+            content={
+              <div className="flex flex-row flex-1">
+                <div className="flex flex-col flex-1 pr-4">
                   <span>
-                    in viewport
-                    <span className="ml-1 text-white">
-                      {viewportIdentificator}
-                    </span>
+                    Series is <span className="text-white">tracked</span>
                   </span>
-                )}
-              </div>
-              <div className="flex flex-2 items-center justify-center">
-                <Icon name="info-link" className="text-primary-active" />
+                  {viewportIdentificator && (
+                    <span>
+                      in viewport
+                      <span className="ml-1 text-white">
+                        {viewportIdentificator}
+                      </span>
+                    </span>
+                  )}
+                </div>
+                <div className="flex flex-2 items-center justify-center">
+                  <Icon name="info-link" className="text-primary-active" />
+                </div>
               </div>
+            }
+          >
+            <Icon name={trackedIcon} className="text-primary-light mb-2 w-4" />
+            <div className="text-white text-xl leading-tight h-5">
+              {viewportIdentificator}
             </div>
-            <svg
-              className="absolute text-black stroke-secondary-main stroke-2"
-              style={{
-                top: 'calc(50% - 8px)',
-                left: -15,
-                transform: 'rotate(270deg)',
-              }}
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-            >
-              <path fill="currentColor" d="M24 22h-24l12-20z" />
-            </svg>
-          </div>
+          </Tooltip>
         </div>
         {isTracked && (
           <Icon
diff --git a/platform/ui/src/components/Tooltip/Tooltip.jsx b/platform/ui/src/components/Tooltip/Tooltip.jsx
index ec5752668..b4a1a48d4 100644
--- a/platform/ui/src/components/Tooltip/Tooltip.jsx
+++ b/platform/ui/src/components/Tooltip/Tooltip.jsx
@@ -26,19 +26,27 @@ const arrowPositionStyle = {
 
 const Tooltip = ({ position, content, tight, children }) => {
   const [isActive, setIsActive] = useState(false);
+
+  const handleMouseOver = () => {
+    if (!isActive) {
+      setIsActive(true);
+    }
+  };
+
+  const handleMouseOut = () => {
+    if (isActive) {
+      setIsActive(false);
+    }
+  };
+
   return (
     <div
-      className="relative"
-      onMouseOver={() => {
-        if (!isActive) {
-          setIsActive(true);
-        }
-      }}
-      onMouseOut={() => {
-        if (isActive) {
-          setIsActive(false);
-        }
-      }}
+      className="relative "
+      onMouseOver={handleMouseOver}
+      onFocus={handleMouseOver}
+      onMouseOut={handleMouseOut}
+      onBlur={handleMouseOut}
+      role="tooltip"
     >
       {children}
       <div
diff --git a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
index d3f2a0796..8cfa05473 100644
--- a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
+++ b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon, ButtonGroup, Button } from '@ohif/ui';
+import { Icon, ButtonGroup, Button, Tooltip } from '@ohif/ui';
 
 const classes = {
   infoHeader: 'text-base text-primary-light',
@@ -51,40 +51,29 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
     }
 
     return (
-      <div className="showTooltipOnHover relative">
-        <Icon
-          name={isTracked ? 'tracked' : 'dotted-circle'}
-          className="text-primary-light w-6"
-        />
-        {isTracked && (
-          <div
-            className={classnames(
-              'tooltip tooltip-top-left bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
-            )}
+      <div className="relative">
+        {!isTracked ? (
+          <Icon name="dotted-circle" className="text-primary-light w-6" />
+        ) : (
+          <Tooltip
+            position="bottom-left"
+            content={
+              <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="text-white font-bold"> tracked</span> and
+                    can be viewed <br /> in the measurement panel
+                  </span>
+                </div>
+              </div>
+            }
           >
-            <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="text-white font-bold"> tracked</span> and can
-                  be viewed <br /> in the measurement panel
-                </span>
-              </div>
-            </div>
-            <svg
-              className="absolute text-primary-dark h-4 left-0 stroke-secondary-main"
-              style={{ top: -15 }}
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
-              <path fill="currentColor" d="M24 22h-24l12-20z" />
-            </svg>
-          </div>
+            <Icon name="tracked" className="text-primary-light w-6" />
+          </Tooltip>
         )}
       </div>
     );
@@ -129,20 +118,9 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
         </ButtonGroup>
       </div>
       <div className="flex ml-4 mr-2">
-        <div className="showTooltipOnHover flex justify-end relative">
-          <div className="relative">
-            <Icon name="profile" className="text-white w-5" />
-            <Icon
-              name="info-link"
-              className="bg-black text-white w-5 absolute"
-              style={{ right: -7, bottom: -10 }}
-            />
-          </div>
-          <div
-            className={classnames(
-              'tooltip tooltip-top-right bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content ml-1'
-            )}
-          >
+        <Tooltip
+          position="bottom-right"
+          content={
             <div className="flex py-2">
               <div className="flex pt-1">
                 <Icon name="info-link" className="w-4 text-primary-main" />
@@ -197,18 +175,19 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
                 </div>
               </div>
             </div>
-            <svg
-              className="absolute text-primary-dark h-4 right-0 stroke-secondary-main"
-              style={{ top: -15 }}
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
-              <path fill="currentColor" d="M24 22h-24l12-20z" />
-            </svg>
+          }
+        >
+          <div className="showTooltipOnHover flex justify-end relative">
+            <div className="relative">
+              <Icon name="profile" className="text-white w-5" />
+              <Icon
+                name="info-link"
+                className="bg-black text-white w-5 absolute"
+                style={{ right: -7, bottom: -10 }}
+              />
+            </div>
           </div>
-        </div>
+        </Tooltip>
       </div>
     </div>
   );
diff --git a/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx b/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx
index bc525af4f..855e63df5 100644
--- a/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx
+++ b/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx
@@ -9,7 +9,7 @@ const ViewportGrid = ({ rows, cols, viewportContents }) => {
       <div
         key={index}
         className={classnames(
-          'rounded-lg hover:border-primary-light transition duration-300',
+          'rounded-lg hover:border-primary-light transition duration-300 outline-none',
           {
             'border-2 border-primary-light -m-px': isActive,
             'border border-secondary-light': !isActive,