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;