Tidying up naming
This commit is contained in:
parent
4b8dcef956
commit
b967d064f0
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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 && (
|
||||
<ThumbnailList
|
||||
thumbnails={displaySets}
|
||||
currentDisplaySetInstanceUID={currentDisplaySetInstanceUID}
|
||||
activeDisplaySetInstanceUID={activeDisplaySetInstanceUID}
|
||||
onThumbnailClick={onClickThumbnail}
|
||||
onThumbnailDoubleClick={onDoubleClickThumbnail}
|
||||
onClickUntrack={onClickUntrack}
|
||||
/>
|
||||
)}
|
||||
@ -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,
|
||||
};
|
||||
|
||||
|
||||
@ -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 = {
|
||||
|
||||
@ -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,
|
||||
};
|
||||
|
||||
|
||||
@ -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,
|
||||
};
|
||||
|
||||
|
||||
@ -14,6 +14,7 @@ const ThumbnailTracked = ({
|
||||
numInstances,
|
||||
dragData,
|
||||
onClick,
|
||||
onDoubleClick,
|
||||
onClickUntrack,
|
||||
viewportIdentificator,
|
||||
isTracked,
|
||||
@ -72,6 +73,7 @@ const ThumbnailTracked = ({
|
||||
)}
|
||||
</div>
|
||||
<Thumbnail
|
||||
displaySetInstanceUID={displaySetInstanceUID}
|
||||
imageSrc={imageSrc}
|
||||
imageAltText={imageAltText}
|
||||
dragData={dragData}
|
||||
@ -80,6 +82,7 @@ const ThumbnailTracked = ({
|
||||
numInstances={numInstances}
|
||||
isActive={isActive}
|
||||
onClick={onClick}
|
||||
onDoubleClick={onDoubleClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user