[IDC-1905] Hover tooltips for Segmentation + RTSTRUCT extension (#2044)

* WIP debug dialog

* Rename the p10 downloader extension to debugger extension, add button to toolbar. Deactivate it by default.

* Fix unit tests

* WIP

* WIP

* Finish mailTo

* tooltop

extensions/dicom-rt/package.json

@@ -34,7 +34,8 @@
     "dcmjs": "0.16.3",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "react-tooltip": "4.2.10"
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",

extensions/dicom-rt/src/components/StructureSetItem/StructureSetItem.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { TableListItem, Icon, Tooltip, OverlayTrigger } from '@ohif/ui';
+import ReactTooltip from 'react-tooltip';
 
 import './StructureSetItem.css';
 
@@ -68,7 +69,18 @@ const StructureSetItem = ({
     >
       <div>
         <div className="item-label" style={{ marginBottom: 4 }}>
-          <span>{label}</span>
+          <a data-tip data-for={`StructureHover${index}`}>
+            <span>{label}</span>
+          </a>
+          <ReactTooltip
+            id={`StructureHover${index}`}
+            delayShow={250}
+            place="right"
+            border={true}
+            type="light"
+          >
+            <span>{label}</span>
+          </ReactTooltip>
           {!isDisabled && (
             <Icon
               className={`eye-icon ${isVisible && '--visible'}`}

extensions/dicom-segmentation/package.json

@@ -39,6 +39,7 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "gl-matrix": "^3.3.0",
-    "react-select": "^3.0.8"
+    "react-select": "^3.0.8",
+    "react-tooltip": "4.2.10"
   }
 }

extensions/dicom-segmentation/src/components/SegmentItem/SegmentItem.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { TableListItem, Icon } from '@ohif/ui';
+import ReactTooltip from 'react-tooltip';
 
 import './SegmentItem.css';
 
@@ -17,7 +18,15 @@ ColoredCircle.propTypes = {
   color: PropTypes.array.isRequired,
 };
 
-const SegmentItem = ({ index, label, onClick, itemClass, color, visible = true, onVisibilityChange }) => {
+const SegmentItem = ({
+  index,
+  label,
+  onClick,
+  itemClass,
+  color,
+  visible = true,
+  onVisibilityChange,
+}) => {
   const [isVisible, setIsVisible] = useState(visible);
 
   useEffect(() => {
@@ -37,7 +46,18 @@ const SegmentItem = ({ index, label, onClick, itemClass, color, visible = true,
       >
         <div>
           <div className="segment-label" style={{ marginBottom: 4 }}>
-            <span>{label}</span>
+            <a data-tip data-for={`SegmentHover${index}`}>
+              <span>{label}</span>
+            </a>
+            <ReactTooltip
+              id={`SegmentHover${index}`}
+              delayShow={250}
+              place="right"
+              border={true}
+              type="light"
+            >
+              <span>{label}</span>
+            </ReactTooltip>
             <Icon
               className={`eye-icon ${isVisible && '--visible'}`}
               name={isVisible ? 'eye' : 'eye-closed'}
@@ -61,7 +81,7 @@ const SegmentItem = ({ index, label, onClick, itemClass, color, visible = true,
                 <span style={{ marginRight: '4px' }}>
                   <Icon name="edit" width="14px" height="14px" />
                 </span>
-              Relabel
+                Relabel
               </button>
               <button
                 className="btnAction"
@@ -70,7 +90,7 @@ const SegmentItem = ({ index, label, onClick, itemClass, color, visible = true,
                 <span style={{ marginRight: '4px' }}>
                   <Icon name="edit" width="14px" height="14px" />
                 </span>
-              Description
+                Description
               </button>
             </div>
           )}
@@ -90,7 +110,7 @@ SegmentItem.propTypes = {
 
 SegmentItem.defaultProps = {
   itemClass: '',
-  onClick: () => { }
+  onClick: () => {},
 };
 
 export default SegmentItem;

yarn.lock

@@ -16020,6 +16020,14 @@ react-simple-code-editor@^0.9.0:
   resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.9.15.tgz#59e3583832e9e98992d3674b2d7673b4cd1c5709"
   integrity sha512-M8iKgjBTBZK92tZYgOEfMuR7c3zZ0q0v3QYllSxIPx3SU+w003VofH50txXQSBTu92pSOm2tidON1HbQ1l8BDA==
 
+react-tooltip@4.2.10:
+  version "4.2.10"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.10.tgz#ed1a1acd388940c96f4b6309f4fd4dcce5e01bdc"
+  integrity sha512-D7ZLx6/QwpUl0SZRek3IZy/HWpsEEp0v3562tcT8IwZgu8IgV7hY5ZzniTkHyRcuL+IQnljpjj7A7zCgl2+T3w==
+  dependencies:
+    prop-types "^15.7.2"
+    uuid "^7.0.3"
+
 react-transition-group@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.0.0.tgz#e882e61fce8622ed981b6e31fc7ef52d43a1a06a"
@@ -19557,6 +19565,11 @@ uuid@^3.0.1, uuid@^3.1.0, uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
   integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==
 
+uuid@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
+  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
+
 v8-compile-cache@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz#00f7494d2ae2b688cfe2899df6ed2c54bef91dbe"