prefer onInteraction over more granular events for changing activeViewport

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

@@ -10,10 +10,8 @@ function ViewportPane({
   children,
   className,
   isActive,
-  onClick,
   onDrop,
-  onScroll,
+  onInteraction,
-  onWheel,
   acceptDropsFor,
 }) {
   const [{ isHovered, isHighlighted }, drop] = useDrop({
@@ -24,6 +22,7 @@ function ViewportPane({
       const isOver = monitor.isOver();
 
       if (canDrop && isOver && onDrop) {
+        onInteraction();
         onDrop(droppedItem);
       }
     },
@@ -40,11 +39,9 @@ function ViewportPane({
       // onInteraction...
       // https://reactjs.org/docs/events.html#mouse-events
       // https://stackoverflow.com/questions/8378243/catch-scrolling-event-on-overflowhidden-element
-      // setActiveViewport
+      onClick={onInteraction}
-      onClick={onClick}
+      onScroll={onInteraction}
-      onScroll={onScroll}
+      onWheel={onInteraction}
-      onWheel={onWheel}
-      onSc
       className={classnames(
         'rounded-lg hover:border-primary-light transition duration-300 outline-none overflow-hidden',
         {
@@ -68,19 +65,16 @@ ViewportPane.propTypes = {
   isActive: PropTypes.bool.isRequired,
   /** Indicates drag items we should accept for drops */
   acceptDropsFor: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
   /** Function that handles drop events */
   onDrop: PropTypes.func.isRequired,
-  onScroll: PropTypes.func,
+  /** Called when the viewportPane is interacted with by the user */
-  onWheel: PropTypes.func,
+  onInteraction: PropTypes.func.isRequired,
 };
 
 const noop = () => {};
 
 ViewportPane.defaultProps = {
-  onClick: noop,
+  onInteraction: noop,
-  onScroll: noop,
-  onWheel: noop,
 }
 
 export default ViewportPane;

platform/viewer/src/components/ViewportGrid.jsx

@@ -100,9 +100,7 @@ function ViewerViewportGrid(props) {
             className="m-1"
             acceptDropsFor="displayset"
             onDrop={onDropHandler}
-            onScroll={() => { setActiveViewportIndex(viewportIndex); }}
+            onInteraction={() => { setActiveViewportIndex(viewportIndex); }}
-            onClick={() => { setActiveViewportIndex(viewportIndex); }}
-            onWheel={() => { setActiveViewportIndex(viewportIndex); }}
             isActive={activeViewportIndex === viewportIndex}
           >
             <EmptyViewport />