From 6bbe206a4554e544f2ca952560f56c82a6a1060a Mon Sep 17 00:00:00 2001 From: dannyrb Date: Wed, 20 May 2020 01:26:44 -0400 Subject: [PATCH] basic drop to set displaySet --- .../core/src/extensions/ExtensionManager.js | 2 +- .../DisplaySetService/DisplaySetService.js | 9 +- .../viewer/src/components/ViewportGrid.jsx | 83 ++++++++++--------- platform/viewer/src/routes/Mode/Mode.jsx | 10 +-- 4 files changed, 57 insertions(+), 47 deletions(-) diff --git a/platform/core/src/extensions/ExtensionManager.js b/platform/core/src/extensions/ExtensionManager.js index b8de97b20..4e0fda85f 100644 --- a/platform/core/src/extensions/ExtensionManager.js +++ b/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, diff --git a/platform/core/src/services/DisplaySetService/DisplaySetService.js b/platform/core/src/services/DisplaySetService/DisplaySetService.js index d41ffbd6c..08f296c68 100644 --- a/platform/core/src/services/DisplaySetService/DisplaySetService.js +++ b/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? - return displaySetCache.find( + /** + * @param {string} displaySetInstanceUID + * @returns {object} displaySet + */ + getDisplaySetByUID = displaySetInstanceUid => displaySetCache.find( displaySet => displaySet.displaySetInstanceUID === displaySetInstanceUid ); - }; /** * Broadcasts displaySetService changes. diff --git a/platform/viewer/src/components/ViewportGrid.jsx b/platform/viewer/src/components/ViewportGrid.jsx index 785fce1e6..20b4b54d7 100644 --- a/platform/viewer/src/components/ViewportGrid.jsx +++ b/platform/viewer/src/components/ViewportGrid.jsx @@ -20,8 +20,16 @@ function ViewerViewportGrid(props) { // TODO -> Make a HangingProtocolService const HangingProtocolService = displaySets => { - const displaySet = DisplaySetService.activeDisplaySets[0] - const displaySetInstanceUID = displaySet.displaySetInstanceUID; + let displaySetInstanceUID; + + // Fallback + if(!displaySets || !displaySets.length) { + const displaySet = DisplaySetService.activeDisplaySets[0] + 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 ( { - console.warn('DROPPED ITEM:', droppedItem); - }} + onDrop={onDropHandler} 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 => { - console.warn('DROPPED ITEM:', droppedItem); - }} + onDrop={onDropHandler} isActive={activeViewportIndex === viewportIndex} > - {ViewportPanes} + {/* {ViewportPanes} */} + {getViewportPanes()} ); } diff --git a/platform/viewer/src/routes/Mode/Mode.jsx b/platform/viewer/src/routes/Mode/Mode.jsx index e5c152db3..d8c0ed175 100644 --- a/platform/viewer/src/routes/Mode/Mode.jsx +++ b/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({