basic drop to set displaySet

platform/core/src/extensions/ExtensionManager.js

@@ -178,7 +178,7 @@ export default class ExtensionManager {
 
     try {
       const extensionModule = getModuleFn({
-        getDataSources: this.getDataSources,
+        getDataSources: this.getDataSources, // Why pass this in if we're passing in `extensionManager`?
         servicesManager: this._servicesManager,
         commandsManager: this._commandsManager,
         appConfig: this._appConfig,

platform/core/src/services/DisplaySetService/DisplaySetService.js

@@ -46,12 +46,13 @@ export default class DisplaySetService {
     );
   };
 
-  getDisplaySetByUID = displaySetInstanceUid => {
+  /**
-    // TODO: Why is this searching active, not just displaySets?
+   * @param {string} displaySetInstanceUID
-    return displaySetCache.find(
+   * @returns {object} displaySet
+   */
+  getDisplaySetByUID = displaySetInstanceUid => displaySetCache.find(
       displaySet => displaySet.displaySetInstanceUID === displaySetInstanceUid
     );
-  };
 
   /**
    * Broadcasts displaySetService changes.

platform/viewer/src/components/ViewportGrid.jsx

@@ -20,8 +20,16 @@ function ViewerViewportGrid(props) {
 
   // TODO -> Make a HangingProtocolService
   const HangingProtocolService = displaySets => {
+    let displaySetInstanceUID;
+
+    // Fallback
+    if(!displaySets || !displaySets.length) {
       const displaySet = DisplaySetService.activeDisplaySets[0]
-    const displaySetInstanceUID = displaySet.displaySetInstanceUID;
+      displaySetInstanceUID = displaySet.displaySetInstanceUID;
+    } else {
+      const displaySet = displaySets[0];
+      displaySetInstanceUID = displaySet.displaySetInstanceUID;
+    }
 
     return {
       numRows: 1,
@@ -35,19 +43,6 @@ function ViewerViewportGrid(props) {
     };
   };
 
-  const handleDisplaySetSubscription = useCallback(displaySets => {
-    setViewportGrid(HangingProtocolService(displaySets));
-  });
-
-  useEffect(() => {
-    const { unsubscribe } = DisplaySetService.subscribe(
-      DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
-      handleDisplaySetSubscription
-    );
-
-    return unsubscribe;
-  }, []);
-
   // From ViewportGridService and/or ContextProvider
   const [viewportGrid, setViewportGrid] = useState({
     numCols: 1,
@@ -55,6 +50,32 @@ function ViewerViewportGrid(props) {
     viewports: []
   });
 
+
+  useEffect(() => {
+    const { unsubscribe } = DisplaySetService.subscribe(
+      DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
+      displaySets => {
+        setViewportGrid(HangingProtocolService(displaySets));
+      },
+    );
+
+    return unsubscribe;
+  }, []);
+
+  // TODO: either need hover to change "active viewport"
+  // so we can use it as our target for setting the displaySet,
+  // or the dropHandler needs to know which viewport was dropped on
+  // in event data
+  const onDropHandler = ({displaySetInstanceUID}) => {
+    const droppedDisplaySet = DisplaySetService.getDisplaySetByUID(displaySetInstanceUID);
+    const updatedViewportGridState = HangingProtocolService([droppedDisplaySet]);
+
+    console.warn('DROPPED: ', displaySetInstanceUID, droppedDisplaySet, updatedViewportGridState);
+
+    // This is not updating the displayed DisplaySet
+    setViewportGrid(updatedViewportGridState);
+  }
+
   // viewportData --> displaySets
   const getViewportPanes = () =>
     viewportGrid.viewports.map((viewport, viewportIndex) => {
@@ -65,6 +86,7 @@ function ViewerViewportGrid(props) {
 
       const displaySet = DisplaySetService.getDisplaySetByUID(displaySetInstanceUID);
 
+      // TODO: Better Empty Viewport
       if (!displaySet) {
         return (
           <ViewportPane
@@ -72,24 +94,12 @@ function ViewerViewportGrid(props) {
             className="m-1"
             // Pass in as prop?
             acceptDropsFor="displayset"
-            onDrop={droppedItem => {
+            onDrop={onDropHandler}
-              console.warn('DROPPED ITEM:', droppedItem);
-            }}
             isActive={activeViewportIndex === viewportIndex}
           />
         );
       }
 
-      // if (!displaySet) {
-      //   // TODO: Empty Viewport
-      //   return null;
-      // }
-
-      // const pluginName =
-      //   !layout.plugin && displaySet && displaySet.plugin
-      //     ? displaySet.plugin
-      //     : layout.plugin;
-
       // TODO -> Need way for other viewport e.g. vtk to be used.
 
       const ViewportComponent = _getViewportComponent(
@@ -102,9 +112,7 @@ function ViewerViewportGrid(props) {
           key={viewportIndex}
           className="m-1"
           acceptDropsFor="displayset"
-          onDrop={droppedItem => {
+          onDrop={onDropHandler}
-            console.warn('DROPPED ITEM:', droppedItem);
-          }}
           isActive={activeViewportIndex === viewportIndex}
         >
           <ViewportComponent
@@ -116,15 +124,16 @@ function ViewerViewportGrid(props) {
       );
     });
 
-  const ViewportPanes = React.useMemo(getViewportPanes, [
+  // const ViewportPanes = React.useMemo(getViewportPanes, [
-    viewportComponents,
+  //   viewportComp'onents,
-    activeViewportIndex,
+  //   activeViewportIndex,
-    viewportGrid
+  //   viewportGrid,
-  ]);
+  // ]);
 
   return (
     <ViewportGrid numRows={viewportGrid.numRows} numCols={viewportGrid.numCols}>
-      {ViewportPanes}
+      {/* {ViewportPanes} */}
+      {getViewportPanes()}
     </ViewportGrid>
   );
 }

platform/viewer/src/routes/Mode/Mode.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useCallback } from 'react';
+import { useParams } from 'react-router';
 import PropTypes from 'prop-types';
 //
 import { ToolBarManager } from '@ohif/core';
@@ -73,21 +74,19 @@ export default function ModeRoute({
     route.init({ toolBarManager });
   }, [mode, dataSourceName, location]);
 
-  const createDisplaySets = useCallback(() => {
+  // This queries for series, but... What does it do with them?
+  useEffect(() => {
     // Add SOPClassHandlers to a new SOPClassManager.
     DisplaySetService.init(extensionManager, sopClassHandlers);
 
     const queryParams = location.search;
+    console.log('queryParams: ', queryParams);
 
     // Call the data source to start building the view model?
     dataSource.retrieve.series.metadata(
       queryParams,
       DisplaySetService.makeDisplaySets
     );
-  }, [location]);
-
-  useEffect(() => {
-    createDisplaySets();
   }, [mode, dataSourceName, location]);
 
   return (
@@ -98,6 +97,7 @@ export default function ModeRoute({
       <DragAndDropProvider>
         <LayoutComponent
           {...layoutTemplateData.props}
+          StudyInstanceUIDs={StudyInstanceUIDs}
           ViewportGridComp={ViewportGridWithDataSource}
         />
       </DragAndDropProvider>