bubble up thumbnail "untrack" clicks to parent "StudyBrowser" component w/ prop drilling

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

@@ -50,9 +50,6 @@ function PanelStudyBrowserTracking({
           StudyInstanceUID,
           SeriesInstanceUID,
         });
-
-        console.log('PANEL:', measurement);
-        // console.log('Mapped:', annotation);
       }
     );
 
@@ -159,7 +156,7 @@ function PanelStudyBrowserTracking({
           changedDisplaySets,
           thumbnailImageSrcMap,
           trackedSeries,
-          viewports,
+          viewports
         );
 
         setDisplaySets(mappedDisplaySets);
@@ -214,6 +211,9 @@ function PanelStudyBrowserTracking({
       onClickTab={clickedTabName => {
         setActiveTabName(clickedTabName);
       }}
+      onClickUntrack={displaySetInstanceUID =>
+        console.log(displaySetInstanceUID)
+      }
     />
   );
 }

platform/ui/src/assets/styles/styles.css

@@ -40,11 +40,3 @@
 .invisible-scrollbar::-webkit-scrollbar-thumb:window-inactive {
   @apply hidden;
 }
-
-.showExcludeButtonOnHover .excludeButton {
-  display: none;
-}
-
-.showExcludeButtonOnHover:hover .excludeButton {
-  display: block;
-}

platform/ui/src/components/StudyBrowser/StudyBrowser.jsx

@@ -25,6 +25,7 @@ const StudyBrowser = ({
   onClickTab,
   onClickStudy,
   onClickThumbnail,
+  onClickUntrack,
 }) => {
   const [thumbnailActive, setThumbnailActive] = useState(null);
 
@@ -58,15 +59,16 @@ const StudyBrowser = ({
               <ThumbnailList
                 thumbnails={displaySets}
                 thumbnailActive={thumbnailActive}
-                onThumbnailClick={thumbnailId => {
+                onThumbnailClick={displaySetInstanceUID => {
                   setThumbnailActive(
-                    thumbnailId === thumbnailActive ? null : thumbnailId
+                    displaySetInstanceUID === thumbnailActive
+                      ? null
+                      : displaySetInstanceUID
                   );
-
+                  onClickThumbnail(displaySetInstanceUID);
-                  if (onClickThumbnail) {
+                }}
-                    // TODO: what is thumbnailId? Should pass display set instead
+                onClickUntrack={displaySetInstanceUID => {
-                    onClickThumbnail(thumbnailId);
+                  onClickUntrack(displaySetInstanceUID);
-                  }
                 }}
               />
             )}
@@ -116,6 +118,7 @@ StudyBrowser.propTypes = {
   onClickTab: PropTypes.func.isRequired,
   onClickStudy: PropTypes.func,
   onClickThumbnail: PropTypes.func,
+  onClickUntrack: PropTypes.func,
   activeTabName: PropTypes.string.isRequired,
   expandedStudyInstanceUIDs: PropTypes.arrayOf(PropTypes.string).isRequired,
   tabs: PropTypes.arrayOf(
@@ -164,4 +167,13 @@ StudyBrowser.propTypes = {
   ),
 };
 
+const noop = () => {};
+
+StudyBrowser.defaultProps = {
+  onClickTab: noop,
+  onClickStudy: noop,
+  onClickThumbnail: noop,
+  onClickUntrack: noop,
+};
+
 export default StudyBrowser;

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

@@ -7,6 +7,7 @@ const ThumbnailList = ({
   thumbnails,
   thumbnailActive,
   onThumbnailClick,
+  onClickUntrack,
 }) => {
   return (
     <div className="py-3 bg-black">
@@ -57,6 +58,7 @@ const ThumbnailList = ({
                   isTracked={isTracked}
                   isActive={isActive}
                   onClick={() => onThumbnailClick(displaySetInstanceUID)}
+                  onClickUntrack={() => onClickUntrack(displaySetInstanceUID)}
                 />
               );
             case 'thumbnailNoImage':
@@ -111,6 +113,7 @@ ThumbnailList.propTypes = {
   ),
   thumbnailActive: PropTypes.string,
   onThumbnailClick: PropTypes.func,
+  onClickUntrack: PropTypes.func.isRequired,
 };
 
 export default ThumbnailList;

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

@@ -13,6 +13,7 @@ const ThumbnailTracked = ({
   numInstances,
   dragData,
   onClick,
+  onClickUntrack,
   viewportIdentificator,
   isTracked,
   isActive,
@@ -22,7 +23,7 @@ const ThumbnailTracked = ({
   return (
     <div
       className={classnames(
-        'flex flex-row flex-1 px-3 py-2 showExcludeButtonOnHover cursor-pointer outline-none',
+        'flex flex-row flex-1 px-3 py-2 cursor-pointer outline-none',
         className
       )}
     >
@@ -63,10 +64,9 @@ const ThumbnailTracked = ({
           </Tooltip>
         </div>
         {isTracked && (
-          <Icon
+          <div onClick={onClickUntrack}>
-            name="cancel"
+            <Icon name="cancel" className="w-4 text-primary-active" />
-            className="w-4 text-primary-active excludeButton"
+          </div>
-          />
         )}
       </div>
       <Thumbnail
@@ -102,6 +102,7 @@ ThumbnailTracked.propTypes = {
   seriesNumber: PropTypes.number.isRequired,
   numInstances: PropTypes.number.isRequired,
   onClick: PropTypes.func.isRequired,
+  onClickUntrack: PropTypes.func.isRequired,
   viewportIdentificator: PropTypes.string,
   isTracked: PropTypes.bool,
   isActive: PropTypes.bool.isRequired,