action on ViewportPanes for setting the active viewport

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

@@ -10,7 +10,10 @@ function ViewportPane({
   children,
   className,
   isActive,
+  onClick,
   onDrop,
+  onScroll,
+  onWheel,
   acceptDropsFor,
 }) {
   const [{ isHovered, isHighlighted }, drop] = useDrop({
@@ -34,6 +37,14 @@ function ViewportPane({
   return (
     <div
       ref={drop}
+      // onInteraction...
+      // https://reactjs.org/docs/events.html#mouse-events
+      // https://stackoverflow.com/questions/8378243/catch-scrolling-event-on-overflowhidden-element
+      // setActiveViewport
+      onClick={onClick}
+      onScroll={onScroll}
+      onWheel={onWheel}
+      onSc
       className={classnames(
         'rounded-lg hover:border-primary-light transition duration-300 outline-none overflow-hidden',
         {
@@ -57,8 +68,19 @@ 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,
+  onWheel: PropTypes.func,
 };
 
+const noop = () => {};
+
+ViewportPane.defaultProps = {
+  onClick: noop,
+  onScroll: noop,
+  onWheel: noop,
+}
+
 export default ViewportPane;

platform/viewer/src/App.jsx

@@ -54,8 +54,8 @@ function App({ config, defaultExtensions }) {
     console.log(state, action);
 
     switch (action.type) {
-      case 'DO_TODO':
-        return state;
+      case 'SET_ACTIVE_VIEWPORT_INDEX':
+        return { ...state, ...{ activeViewportIndex: action.payload } };
       default:
         return action.payload;
     }

platform/viewer/src/components/ViewportGrid.jsx

@@ -12,6 +12,9 @@ function ViewerViewportGrid(props) {
     { numCols, numRows, activeViewportIndex, viewports },
     dispatch,
   ] = useViewportGrid();
+  const setActiveViewportIndex = index => {
+    dispatch({ type: 'SET_ACTIVE_VIEWPORT_INDEX', payload: index });
+  }
 
   // TODO -> Need some way of selecting which displaySets hit the viewports.
   const { DisplaySetService } = servicesManager.services;
@@ -97,6 +100,9 @@ function ViewerViewportGrid(props) {
             className="m-1"
             acceptDropsFor="displayset"
             onDrop={onDropHandler}
+            onScroll={() => { setActiveViewportIndex(viewportIndex); }}
+            onClick={() => { setActiveViewportIndex(viewportIndex); }}
+            onWheel={() => { setActiveViewportIndex(viewportIndex); }}
             isActive={activeViewportIndex === viewportIndex}
           >
             <EmptyViewport />