From c9a365f7e24d61f83132ad692323d75039a6297f Mon Sep 17 00:00:00 2001 From: Rodrigo Antinarelli Date: Tue, 30 Jun 2020 15:47:09 -0300 Subject: [PATCH 1/9] double click thumbnail loads SR in viewport --- .../PanelStudyBrowserTracking.jsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx b/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx index 438ad0d06..bef7c4666 100644 --- a/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx +++ b/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx @@ -22,7 +22,10 @@ function PanelStudyBrowserTracking({ // doesn't have to have such an intense shape. This works well enough for now. // Tabs --> Studies --> DisplaySets --> Thumbnails const [{ StudyInstanceUIDs }, dispatchImageViewer] = useImageViewer(); - const [{ activeViewportIndex, viewports }] = useViewportGrid(); + const [ + { activeViewportIndex, viewports }, + viewportGridService, + ] = useViewportGrid(); const [ trackedMeasurements, sendTrackedMeasurementsEvent, @@ -35,6 +38,13 @@ function PanelStudyBrowserTracking({ const [displaySets, setDisplaySets] = useState([]); const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({}); + const onClickThumbnailHandler = displaySetInstanceUID => { + viewportGridService.setDisplaysetForViewport({ + viewportIndex: activeViewportIndex, + displaySetInstanceUID, + }); + }; + // TODO: Should this be somewhere else? Feels more like a mode "lifecycle" setup/destroy? useEffect(() => { const { unsubscribe } = MeasurementService.subscribe( @@ -233,6 +243,7 @@ function PanelStudyBrowserTracking({ SeriesInstanceUID: displaySet.SeriesInstanceUID, }); }} + onClickThumbnail={onClickThumbnailHandler} /> ); } From cf30a6da88bd8f834c79e84c5933059ce7d8e15c Mon Sep 17 00:00:00 2001 From: Rodrigo Antinarelli Date: Tue, 30 Jun 2020 15:53:57 -0300 Subject: [PATCH 2/9] define currentDisplaySetData in viewport grid provider --- .../src/contextProviders/ViewportGridProvider.jsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/platform/ui/src/contextProviders/ViewportGridProvider.jsx b/platform/ui/src/contextProviders/ViewportGridProvider.jsx index fe77ef0a0..eb8d9809c 100644 --- a/platform/ui/src/contextProviders/ViewportGridProvider.jsx +++ b/platform/ui/src/contextProviders/ViewportGridProvider.jsx @@ -12,6 +12,7 @@ const DEFAULT_STATE = { numCols: 1, viewports: [], activeViewportIndex: 0, + currentDisplaySetData: {}, }; export const ViewportGridContext = createContext(DEFAULT_STATE); @@ -19,15 +20,17 @@ export const ViewportGridContext = createContext(DEFAULT_STATE); export function ViewportGridProvider({ children, service }) { const viewportGridReducer = (state, action) => { switch (action.type) { - case 'SET_ACTIVE_VIEWPORT_INDEX': - return { ...state, ...{ activeViewportIndex: action.payload } }; + case 'SET_ACTIVE_VIEWPORT_INDEX': { + const activeViewportIndex = action.payload; + const currentDisplaySetData = state.viewports[activeViewportIndex]; + return { ...state, ...{ activeViewportIndex, currentDisplaySetData } }; + } case 'SET_DISPLAYSET_FOR_VIEWPORT': { const { viewportIndex, displaySetInstanceUID } = action.payload; const viewports = state.viewports.slice(); - + const currentDisplaySetData = { displaySetInstanceUID }; viewports[viewportIndex] = { displaySetInstanceUID }; - - return { ...state, ...{ viewports } }; + return { ...state, ...{ viewports, currentDisplaySetData } }; } case 'SET_LAYOUT': { const { numCols, numRows } = action.payload; @@ -55,7 +58,7 @@ export function ViewportGridProvider({ children, service }) { const [viewportGridState, dispatch] = useReducer( viewportGridReducer, - DEFAULT_STATE, + DEFAULT_STATE ); const getState = useCallback(() => viewportGridState, [viewportGridState]); From 34a9733dfefaf5734c229cb1dfa8af5102d189c9 Mon Sep 17 00:00:00 2001 From: Rodrigo Antinarelli Date: Tue, 30 Jun 2020 15:54:21 -0300 Subject: [PATCH 3/9] replace onClick for double click and styles fixes --- .../ui/src/components/Thumbnail/Thumbnail.jsx | 3 +-- .../ThumbnailNoImage/ThumbnailNoImage.jsx | 22 ++++++++++++++++--- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/platform/ui/src/components/Thumbnail/Thumbnail.jsx b/platform/ui/src/components/Thumbnail/Thumbnail.jsx index 44460fa8a..2f6420f04 100644 --- a/platform/ui/src/components/Thumbnail/Thumbnail.jsx +++ b/platform/ui/src/components/Thumbnail/Thumbnail.jsx @@ -36,8 +36,7 @@ const Thumbnail = ({ className, 'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none' )} - onClick={onClick} - onKeyDown={onClick} + onDoubleClick={onClick} role="button" tabIndex="0" > diff --git a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx index 0f01bd9ce..051d4c1df 100644 --- a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx +++ b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import classnames from 'classnames'; import PropTypes from 'prop-types'; import { useDrag } from 'react-dnd'; @@ -10,6 +11,7 @@ const ThumbnailNoImage = ({ modality, onClick, dragData, + isActive, }) => { const [collectedProps, drag, dragPreview] = useDrag({ item: { ...dragData }, @@ -21,9 +23,11 @@ const ThumbnailNoImage = ({ return (
@@ -44,10 +48,22 @@ const ThumbnailNoImage = ({ }; ThumbnailNoImage.propTypes = { + /** + * Data the thumbnail should expose to a receiving drop target. Use a matching + * `dragData.type` to identify which targets can receive this draggable item. + * If this is not set, drag-n-drop will be disabled for this thumbnail. + * + * Ref: https://react-dnd.github.io/react-dnd/docs/api/use-drag#specification-object-members + */ + dragData: PropTypes.shape({ + /** Must match the "type" a dropTarget expects */ + type: PropTypes.string.isRequired, + }), description: PropTypes.string.isRequired, modality: PropTypes.string.isRequired, seriesDate: PropTypes.string.isRequired, onClick: PropTypes.func.isRequired, + isActive: PropTypes.bool.isRequired, }; export default ThumbnailNoImage; From f08ce57c0c36c8d92efedfb74f1e091754d6aa02 Mon Sep 17 00:00:00 2001 From: Rodrigo Antinarelli Date: Tue, 30 Jun 2020 15:54:34 -0300 Subject: [PATCH 4/9] pass isActive prop --- platform/ui/src/components/ThumbnailList/ThumbnailList.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx b/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx index 303159df8..fa17fc13e 100644 --- a/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx +++ b/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx @@ -64,6 +64,7 @@ const ThumbnailList = ({ case 'thumbnailNoImage': return ( Date: Tue, 30 Jun 2020 15:55:17 -0300 Subject: [PATCH 5/9] pass currentDisplaySetUID --- .../PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx b/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx index bef7c4666..cc323aae1 100644 --- a/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx +++ b/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx @@ -23,7 +23,7 @@ function PanelStudyBrowserTracking({ // Tabs --> Studies --> DisplaySets --> Thumbnails const [{ StudyInstanceUIDs }, dispatchImageViewer] = useImageViewer(); const [ - { activeViewportIndex, viewports }, + { activeViewportIndex, viewports, currentDisplaySetData }, viewportGridService, ] = useViewportGrid(); const [ @@ -45,6 +45,9 @@ function PanelStudyBrowserTracking({ }); }; + const currentDisplaySetInstanceUID = + currentDisplaySetData.displaySetInstanceUID || ''; + // TODO: Should this be somewhere else? Feels more like a mode "lifecycle" setup/destroy? useEffect(() => { const { unsubscribe } = MeasurementService.subscribe( @@ -244,6 +247,7 @@ function PanelStudyBrowserTracking({ }); }} onClickThumbnail={onClickThumbnailHandler} + currentDisplaySetInstanceUID={currentDisplaySetInstanceUID} /> ); } From 90ca52585ae93c0e0aadbc1ee272eb1af72b019d Mon Sep 17 00:00:00 2001 From: Rodrigo Antinarelli Date: Tue, 30 Jun 2020 15:57:24 -0300 Subject: [PATCH 6/9] update thumbnail props --- .../components/StudyBrowser/StudyBrowser.jsx | 21 ++++++------------- .../ThumbnailList/ThumbnailList.jsx | 7 ++++--- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx b/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx index 048489e70..24b2f52f3 100644 --- a/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx +++ b/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; @@ -26,9 +26,8 @@ const StudyBrowser = ({ onClickStudy, onClickThumbnail, onClickUntrack, + currentDisplaySetInstanceUID, }) => { - const [thumbnailActive, setThumbnailActive] = useState(null); - const getTabContent = () => { const tabData = tabs.find(tab => tab.name === activeTabName); @@ -58,18 +57,9 @@ const StudyBrowser = ({ {isExpanded && displaySets && ( { - setThumbnailActive( - displaySetInstanceUID === thumbnailActive - ? null - : displaySetInstanceUID - ); - onClickThumbnail(displaySetInstanceUID); - }} - onClickUntrack={displaySetInstanceUID => { - onClickUntrack(displaySetInstanceUID); - }} + currentDisplaySetInstanceUID={currentDisplaySetInstanceUID} + onThumbnailClick={onClickThumbnail} + onClickUntrack={onClickUntrack} /> )} @@ -121,6 +111,7 @@ StudyBrowser.propTypes = { onClickUntrack: PropTypes.func, activeTabName: PropTypes.string.isRequired, expandedStudyInstanceUIDs: PropTypes.arrayOf(PropTypes.string).isRequired, + currentDisplaySetInstanceUID: PropTypes.string.isRequired, tabs: PropTypes.arrayOf( PropTypes.shape({ name: PropTypes.string.isRequired, diff --git a/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx b/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx index fa17fc13e..a29a73e96 100644 --- a/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx +++ b/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx @@ -5,7 +5,7 @@ import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '@ohif/ui'; const ThumbnailList = ({ thumbnails, - thumbnailActive, + currentDisplaySetInstanceUID, onThumbnailClick, onClickUntrack, }) => { @@ -26,7 +26,8 @@ const ThumbnailList = ({ imageSrc, imageAltText, }) => { - const isActive = thumbnailActive === displaySetInstanceUID; + const isActive = + currentDisplaySetInstanceUID === displaySetInstanceUID; switch (componentType) { case 'thumbnail': @@ -112,7 +113,7 @@ ThumbnailList.propTypes = { }), }) ), - thumbnailActive: PropTypes.string, + currentDisplaySetInstanceUID: PropTypes.string, onThumbnailClick: PropTypes.func, onClickUntrack: PropTypes.func.isRequired, }; From 520e1c077420355897a7465cbb3b1dacdb457b3b Mon Sep 17 00:00:00 2001 From: Rodrigo Antinarelli Date: Tue, 30 Jun 2020 16:05:18 -0300 Subject: [PATCH 7/9] fix focus styles --- platform/ui/src/components/Thumbnail/Thumbnail.jsx | 4 ++-- .../ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx | 2 +- platform/ui/tailwind.config.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/platform/ui/src/components/Thumbnail/Thumbnail.jsx b/platform/ui/src/components/Thumbnail/Thumbnail.jsx index 2f6420f04..d5d242626 100644 --- a/platform/ui/src/components/Thumbnail/Thumbnail.jsx +++ b/platform/ui/src/components/Thumbnail/Thumbnail.jsx @@ -34,7 +34,7 @@ const Thumbnail = ({ ref={drag} className={classnames( className, - 'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none' + 'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none group' )} onDoubleClick={onClick} role="button" @@ -45,7 +45,7 @@ const Thumbnail = ({ 'flex flex-1 items-center justify-center rounded-md bg-black text-base text-white overflow-hidden mb-2 min-h-32', isActive ? 'border-2 border-primary-light' - : 'border border-secondary-light hover:border-blue-300' + : 'border border-secondary-light group-focus:border-blue-300 hover:border-blue-300' )} > {imageSrc ? ( diff --git a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx index 051d4c1df..892d371a7 100644 --- a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx +++ b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx @@ -24,7 +24,7 @@ const ThumbnailNoImage = ({
Date: Tue, 30 Jun 2020 17:53:36 -0300 Subject: [PATCH 8/9] fix: remove focus if clicked outside thumbnail --- .../ui/src/components/Thumbnail/Thumbnail.jsx | 60 ++++++++++--------- .../ThumbnailNoImage/ThumbnailNoImage.jsx | 28 +++++---- platform/ui/src/utils/blurHandlerListener.js | 10 ++++ 3 files changed, 60 insertions(+), 38 deletions(-) create mode 100644 platform/ui/src/utils/blurHandlerListener.js diff --git a/platform/ui/src/components/Thumbnail/Thumbnail.jsx b/platform/ui/src/components/Thumbnail/Thumbnail.jsx index d5d242626..3c30bc53b 100644 --- a/platform/ui/src/components/Thumbnail/Thumbnail.jsx +++ b/platform/ui/src/components/Thumbnail/Thumbnail.jsx @@ -1,9 +1,10 @@ -import React from 'react'; +import React, { useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { useDrag } from 'react-dnd'; // import { Icon } from '@ohif/ui'; +import blurHandlerListener from '../../utils/blurHandlerListener'; /** * @@ -29,9 +30,12 @@ const Thumbnail = ({ }, }); + const thumbnailElement = useRef(null); + return (
blurHandlerListener(thumbnailElement)} + ref={thumbnailElement} className={classnames( className, 'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none group' @@ -40,34 +44,36 @@ const Thumbnail = ({ role="button" tabIndex="0" > -
- {imageSrc ? ( - {imageAltText} - ) : ( -
{imageAltText}
- )} -
-
-
- {'S: '} - {seriesNumber} +
+
+ {imageSrc ? ( + {imageAltText} + ) : ( +
{imageAltText}
+ )}
-
- {numInstances} +
+
+ {'S: '} + {seriesNumber} +
+
+ {numInstances} +
+
{description}
-
{description}
); }; diff --git a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx index 892d371a7..2ea1546a3 100644 --- a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx +++ b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx @@ -1,9 +1,10 @@ -import React from 'react'; +import React, { useRef } from 'react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; import { useDrag } from 'react-dnd'; import { Icon } from '@ohif/ui'; +import blurHandlerListener from '../../utils/blurHandlerListener'; const ThumbnailNoImage = ({ description, @@ -20,9 +21,12 @@ const ThumbnailNoImage = ({ }, }); + const thumbnailElement = useRef(null); + return (
blurHandlerListener(thumbnailElement)} className={classnames( 'flex flex-row flex-1 px-4 py-3 cursor-pointer outline-none border-transparent hover:border-blue-300 focus:border-blue-300 rounded', isActive ? 'border-2 border-primary-light' : 'border' @@ -31,16 +35,18 @@ const ThumbnailNoImage = ({ role="button" tabIndex="0" > -
-
- -
- {modality} +
+
+
+ +
+ {modality} +
+ {seriesDate} +
+
+ {description}
- {seriesDate} -
-
- {description}
diff --git a/platform/ui/src/utils/blurHandlerListener.js b/platform/ui/src/utils/blurHandlerListener.js new file mode 100644 index 000000000..4ffba68c6 --- /dev/null +++ b/platform/ui/src/utils/blurHandlerListener.js @@ -0,0 +1,10 @@ +export default element => { + const handleClickOutside = event => { + if (element.current && !element.current.contains(event.target)) { + element.current.blur(); + document.removeEventListener('mousedown', handleClickOutside); + } + }; + + document.addEventListener('mousedown', handleClickOutside); +}; From b967d064f01350dcee3bb9b6d18cf72e4ce625ce Mon Sep 17 00:00:00 2001 From: dannyrb Date: Tue, 30 Jun 2020 20:49:37 -0400 Subject: [PATCH 9/9] Tidying up naming --- .../PanelStudyBrowserTracking.jsx | 13 +++++++------ .../components/StudyBrowser/StudyBrowser.jsx | 10 +++++++--- .../ui/src/components/Thumbnail/Thumbnail.jsx | 8 +++++--- .../ThumbnailList/ThumbnailList.jsx | 19 +++++++++++++++---- .../ThumbnailNoImage/ThumbnailNoImage.jsx | 7 ++++--- .../ThumbnailTracked/ThumbnailTracked.jsx | 5 +++++ .../contextProviders/ViewportGridProvider.jsx | 16 +++++++++------- 7 files changed, 52 insertions(+), 26 deletions(-) diff --git a/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx b/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx index 1b717d20f..4a727ce48 100644 --- a/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx +++ b/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx @@ -23,7 +23,7 @@ function PanelStudyBrowserTracking({ // Tabs --> Studies --> DisplaySets --> Thumbnails const [{ StudyInstanceUIDs }, dispatchImageViewer] = useImageViewer(); const [ - { activeViewportIndex, viewports, currentDisplaySetData }, + { activeViewportIndex, viewports }, viewportGridService, ] = useViewportGrid(); const [ @@ -39,15 +39,15 @@ function PanelStudyBrowserTracking({ const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({}); const [jumpToDisplaySet, setJumpToDisplaySet] = useState(null); - const onClickThumbnailHandler = displaySetInstanceUID => { + const onDoubleClickThumbnailHandler = displaySetInstanceUID => { viewportGridService.setDisplaysetForViewport({ viewportIndex: activeViewportIndex, displaySetInstanceUID, }); }; - const currentDisplaySetInstanceUID = - currentDisplaySetData.displaySetInstanceUID || ''; + const activeDisplaySetInstanceUID = + viewports[activeViewportIndex]?.displaySetInstanceUID; // TODO: Should this be somewhere else? Feels more like a mode "lifecycle" setup/destroy? useEffect(() => { @@ -300,8 +300,9 @@ function PanelStudyBrowserTracking({ SeriesInstanceUID: displaySet.SeriesInstanceUID, }); }} - onClickThumbnail={onClickThumbnailHandler} - currentDisplaySetInstanceUID={currentDisplaySetInstanceUID} + onClickThumbnail={() => {}} + onDoubleClickThumbnail={onDoubleClickThumbnailHandler} + activeDisplaySetInstanceUID={activeDisplaySetInstanceUID} /> ); } diff --git a/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx b/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx index 24b2f52f3..c5110f5c7 100644 --- a/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx +++ b/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx @@ -25,8 +25,9 @@ const StudyBrowser = ({ onClickTab, onClickStudy, onClickThumbnail, + onDoubleClickThumbnail, onClickUntrack, - currentDisplaySetInstanceUID, + activeDisplaySetInstanceUID, }) => { const getTabContent = () => { const tabData = tabs.find(tab => tab.name === activeTabName); @@ -57,8 +58,9 @@ const StudyBrowser = ({ {isExpanded && displaySets && ( )} @@ -108,10 +110,11 @@ StudyBrowser.propTypes = { onClickTab: PropTypes.func.isRequired, onClickStudy: PropTypes.func, onClickThumbnail: PropTypes.func, + onDoubleClickThumbnail: PropTypes.func, onClickUntrack: PropTypes.func, activeTabName: PropTypes.string.isRequired, expandedStudyInstanceUIDs: PropTypes.arrayOf(PropTypes.string).isRequired, - currentDisplaySetInstanceUID: PropTypes.string.isRequired, + activeDisplaySetInstanceUID: PropTypes.string, tabs: PropTypes.arrayOf( PropTypes.shape({ name: PropTypes.string.isRequired, @@ -164,6 +167,7 @@ StudyBrowser.defaultProps = { onClickTab: noop, onClickStudy: noop, onClickThumbnail: noop, + onDoubleClickThumbnail: noop, onClickUntrack: noop, }; diff --git a/platform/ui/src/components/Thumbnail/Thumbnail.jsx b/platform/ui/src/components/Thumbnail/Thumbnail.jsx index 3d0f4c9d1..ec378ae09 100644 --- a/platform/ui/src/components/Thumbnail/Thumbnail.jsx +++ b/platform/ui/src/components/Thumbnail/Thumbnail.jsx @@ -1,8 +1,7 @@ -import React, { useEffect, useRef } from 'react'; +import React, { useRef } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { useDrag } from 'react-dnd'; -// import { Icon } from '@ohif/ui'; import blurHandlerListener from '../../utils/blurHandlerListener'; @@ -20,6 +19,7 @@ const Thumbnail = ({ dragData, isActive, onClick, + onDoubleClick, }) => { // TODO: We should wrap our thumbnail to create a "DraggableThumbnail", as // this will still allow for "drag", even if there is no drop target for the @@ -42,7 +42,8 @@ const Thumbnail = ({ 'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none group' )} id={`thumbnail-${displaySetInstanceUID}`} - onDoubleClick={onClick} + onClick={onClick} + onDoubleClick={onDoubleClick} role="button" tabIndex="0" > @@ -101,6 +102,7 @@ Thumbnail.propTypes = { numInstances: PropTypes.number.isRequired, isActive: PropTypes.bool.isRequired, onClick: PropTypes.func.isRequired, + onDoubleClick: PropTypes.func.isRequired, }; Thumbnail.defaultProps = { diff --git a/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx b/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx index 0c37b571f..80e87f667 100644 --- a/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx +++ b/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx @@ -5,8 +5,9 @@ import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '@ohif/ui'; const ThumbnailList = ({ thumbnails, - currentDisplaySetInstanceUID, + activeDisplaySetInstanceUID, onThumbnailClick, + onThumbnailDoubleClick, onClickUntrack, }) => { return ( @@ -27,7 +28,7 @@ const ThumbnailList = ({ imageAltText, }) => { const isActive = - currentDisplaySetInstanceUID === displaySetInstanceUID; + activeDisplaySetInstanceUID === displaySetInstanceUID; switch (componentType) { case 'thumbnail': @@ -44,6 +45,9 @@ const ThumbnailList = ({ viewportIdentificator={viewportIdentificator} isActive={isActive} onClick={() => onThumbnailClick(displaySetInstanceUID)} + onDoubleClick={() => + onThumbnailDoubleClick(displaySetInstanceUID) + } /> ); case 'thumbnailTracked': @@ -61,6 +65,9 @@ const ThumbnailList = ({ isTracked={isTracked} isActive={isActive} onClick={() => onThumbnailClick(displaySetInstanceUID)} + onDoubleClick={() => + onThumbnailDoubleClick(displaySetInstanceUID) + } onClickUntrack={() => onClickUntrack(displaySetInstanceUID)} /> ); @@ -75,6 +82,9 @@ const ThumbnailList = ({ seriesDate={seriesDate} description={description} onClick={() => onThumbnailClick(displaySetInstanceUID)} + onDoubleClick={() => + onThumbnailDoubleClick(displaySetInstanceUID) + } /> ); default: @@ -116,8 +126,9 @@ ThumbnailList.propTypes = { }), }) ), - currentDisplaySetInstanceUID: PropTypes.string, - onThumbnailClick: PropTypes.func, + activeDisplaySetInstanceUID: PropTypes.string, + onThumbnailClick: PropTypes.func.isRequired, + onThumbnailDoubleClick: PropTypes.func.isRequired, onClickUntrack: PropTypes.func.isRequired, }; diff --git a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx index 7c40ad5b0..c01e619f3 100644 --- a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx +++ b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx @@ -1,9 +1,7 @@ import React, { useRef } from 'react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; -import classnames from 'classnames'; import { useDrag } from 'react-dnd'; - import { Icon } from '@ohif/ui'; import blurHandlerListener from '../../utils/blurHandlerListener'; @@ -13,6 +11,7 @@ const ThumbnailNoImage = ({ seriesDate, modality, onClick, + onDoubleClick, dragData, isActive, }) => { @@ -34,7 +33,8 @@ const ThumbnailNoImage = ({ isActive ? 'border-2 border-primary-light' : 'border' )} id={`thumbnail-${displaySetInstanceUID}`} - onDoubleClick={onClick} + onClick={onClick} + onDoubleClick={onDoubleClick} role="button" tabIndex="0" > @@ -73,6 +73,7 @@ ThumbnailNoImage.propTypes = { modality: PropTypes.string.isRequired, seriesDate: PropTypes.string.isRequired, onClick: PropTypes.func.isRequired, + onDoubleClick: PropTypes.func.isRequired, isActive: PropTypes.bool.isRequired, }; diff --git a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx index 6715a77d3..2d8e09e05 100644 --- a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx +++ b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx @@ -14,6 +14,7 @@ const ThumbnailTracked = ({ numInstances, dragData, onClick, + onDoubleClick, onClickUntrack, viewportIdentificator, isTracked, @@ -72,6 +73,7 @@ const ThumbnailTracked = ({ )}
); @@ -97,6 +100,7 @@ ThumbnailTracked.propTypes = { /** Must match the "type" a dropTarget expects */ type: PropTypes.string.isRequired, }), + displaySetInstanceUID: PropTypes.string.isRequired, className: PropTypes.string, imageSrc: PropTypes.string, imageAltText: PropTypes.string, @@ -104,6 +108,7 @@ ThumbnailTracked.propTypes = { seriesNumber: PropTypes.number.isRequired, numInstances: PropTypes.number.isRequired, onClick: PropTypes.func.isRequired, + onDoubleClick: PropTypes.func.isRequired, onClickUntrack: PropTypes.func.isRequired, viewportIdentificator: PropTypes.string, isTracked: PropTypes.bool, diff --git a/platform/ui/src/contextProviders/ViewportGridProvider.jsx b/platform/ui/src/contextProviders/ViewportGridProvider.jsx index eb8d9809c..a522ea165 100644 --- a/platform/ui/src/contextProviders/ViewportGridProvider.jsx +++ b/platform/ui/src/contextProviders/ViewportGridProvider.jsx @@ -10,9 +10,12 @@ import PropTypes from 'prop-types'; const DEFAULT_STATE = { numRows: 1, numCols: 1, - viewports: [], + viewports: [ + // { + // displaySetInstanceUID: string, + // } + ], activeViewportIndex: 0, - currentDisplaySetData: {}, }; export const ViewportGridContext = createContext(DEFAULT_STATE); @@ -21,16 +24,15 @@ export function ViewportGridProvider({ children, service }) { const viewportGridReducer = (state, action) => { switch (action.type) { case 'SET_ACTIVE_VIEWPORT_INDEX': { - const activeViewportIndex = action.payload; - const currentDisplaySetData = state.viewports[activeViewportIndex]; - return { ...state, ...{ activeViewportIndex, currentDisplaySetData } }; + return { ...state, ...{ activeViewportIndex: action.payload } }; } case 'SET_DISPLAYSET_FOR_VIEWPORT': { const { viewportIndex, displaySetInstanceUID } = action.payload; const viewports = state.viewports.slice(); - const currentDisplaySetData = { displaySetInstanceUID }; + viewports[viewportIndex] = { displaySetInstanceUID }; - return { ...state, ...{ viewports, currentDisplaySetData } }; + + return { ...state, ...{ viewports } }; } case 'SET_LAYOUT': { const { numCols, numRows } = action.payload;