othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1839 from OHIF/fix/OHIF-37-thumbnailDoubleClick

Browse Source 
fix: OHIF-37 / OHIF-160 - Thumbnail double click + Active thumbnail
This commit is contained in:
Danny Brown 2020-06-30 20:59:35 -04:00 committed by GitHub
commit 7dbd4cb448
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 145 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx
View File

@ -22,7 +22,10 @@ function PanelStudyBrowserTracking({
// doesn't have to have such an intense shape. This works well enough for now. // doesn't have to have such an intense shape. This works well enough for now.
// Tabs --> Studies --> DisplaySets --> Thumbnails // Tabs --> Studies --> DisplaySets --> Thumbnails
const [{ StudyInstanceUIDs }, dispatchImageViewer] = useImageViewer(); const [{ StudyInstanceUIDs }, dispatchImageViewer] = useImageViewer();
const [{ activeViewportIndex, viewports }] = useViewportGrid(); const [
{ activeViewportIndex, viewports },
viewportGridService,
] = useViewportGrid();
const [ const [
trackedMeasurements, trackedMeasurements,
sendTrackedMeasurementsEvent, sendTrackedMeasurementsEvent,
@ -36,6 +39,16 @@ function PanelStudyBrowserTracking({
const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({}); const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
const [jumpToDisplaySet, setJumpToDisplaySet] = useState(null); const [jumpToDisplaySet, setJumpToDisplaySet] = useState(null);
const onDoubleClickThumbnailHandler = displaySetInstanceUID => {
viewportGridService.setDisplaysetForViewport({
viewportIndex: activeViewportIndex,
displaySetInstanceUID,
});
};
const activeDisplaySetInstanceUID =
viewports[activeViewportIndex]?.displaySetInstanceUID;
// TODO: Should this be somewhere else? Feels more like a mode "lifecycle" setup/destroy? // TODO: Should this be somewhere else? Feels more like a mode "lifecycle" setup/destroy?
useEffect(() => { useEffect(() => {
const { unsubscribe } = MeasurementService.subscribe( const { unsubscribe } = MeasurementService.subscribe(
@ -287,6 +300,9 @@ function PanelStudyBrowserTracking({
SeriesInstanceUID: displaySet.SeriesInstanceUID, SeriesInstanceUID: displaySet.SeriesInstanceUID,
}); });
}} }}
onClickThumbnail={() => {}}
onDoubleClickThumbnail={onDoubleClickThumbnailHandler}
activeDisplaySetInstanceUID={activeDisplaySetInstanceUID}
/> />
); );
} }

25
platform/ui/src/components/StudyBrowser/StudyBrowser.jsx
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
@ -25,10 +25,10 @@ const StudyBrowser = ({
onClickTab, onClickTab,
onClickStudy, onClickStudy,
onClickThumbnail, onClickThumbnail,
onDoubleClickThumbnail,
onClickUntrack, onClickUntrack,
activeDisplaySetInstanceUID,
}) => { }) => {
const [thumbnailActive, setThumbnailActive] = useState(null);
const getTabContent = () => { const getTabContent = () => {
const tabData = tabs.find(tab => tab.name === activeTabName); const tabData = tabs.find(tab => tab.name === activeTabName);
@ -58,18 +58,10 @@ const StudyBrowser = ({
{isExpanded && displaySets && ( {isExpanded && displaySets && (
<ThumbnailList <ThumbnailList
thumbnails={displaySets} thumbnails={displaySets}
thumbnailActive={thumbnailActive} activeDisplaySetInstanceUID={activeDisplaySetInstanceUID}
onThumbnailClick={displaySetInstanceUID => { onThumbnailClick={onClickThumbnail}
setThumbnailActive( onThumbnailDoubleClick={onDoubleClickThumbnail}
displaySetInstanceUID === thumbnailActive onClickUntrack={onClickUntrack}
? null
: displaySetInstanceUID
);
onClickThumbnail(displaySetInstanceUID);
}}
onClickUntrack={displaySetInstanceUID => {
onClickUntrack(displaySetInstanceUID);
}}
/> />
)} )}
</React.Fragment> </React.Fragment>
@ -118,9 +110,11 @@ StudyBrowser.propTypes = {
onClickTab: PropTypes.func.isRequired, onClickTab: PropTypes.func.isRequired,
onClickStudy: PropTypes.func, onClickStudy: PropTypes.func,
onClickThumbnail: PropTypes.func, onClickThumbnail: PropTypes.func,
onDoubleClickThumbnail: PropTypes.func,
onClickUntrack: PropTypes.func, onClickUntrack: PropTypes.func,
activeTabName: PropTypes.string.isRequired, activeTabName: PropTypes.string.isRequired,
expandedStudyInstanceUIDs: PropTypes.arrayOf(PropTypes.string).isRequired, expandedStudyInstanceUIDs: PropTypes.arrayOf(PropTypes.string).isRequired,
activeDisplaySetInstanceUID: PropTypes.string,
tabs: PropTypes.arrayOf( tabs: PropTypes.arrayOf(
PropTypes.shape({ PropTypes.shape({
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
@ -173,6 +167,7 @@ StudyBrowser.defaultProps = {
onClickTab: noop, onClickTab: noop,
onClickStudy: noop, onClickStudy: noop,
onClickThumbnail: noop, onClickThumbnail: noop,
onDoubleClickThumbnail: noop,
onClickUntrack: noop, onClickUntrack: noop,
}; };

68
platform/ui/src/components/Thumbnail/Thumbnail.jsx
View File

@ -1,9 +1,9 @@
import React from 'react'; import React, { useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { useDrag } from 'react-dnd'; import { useDrag } from 'react-dnd';
//
import { Icon } from '@ohif/ui'; import { Icon } from '@ohif/ui';
import blurHandlerListener from '../../utils/blurHandlerListener';
/** /**
* *
@ -19,6 +19,7 @@ const Thumbnail = ({
dragData, dragData,
isActive, isActive,
onClick, onClick,
onDoubleClick,
}) => { }) => {
// TODO: We should wrap our thumbnail to create a "DraggableThumbnail", as // 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 // this will still allow for "drag", even if there is no drop target for the
@ -30,52 +31,58 @@ const Thumbnail = ({
}, },
}); });
const thumbnailElement = useRef(null);
return ( return (
<div <div
ref={drag} onFocus={() => blurHandlerListener(thumbnailElement)}
ref={thumbnailElement}
className={classnames( className={classnames(
className, 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'
)} )}
id={`thumbnail-${displaySetInstanceUID}`} id={`thumbnail-${displaySetInstanceUID}`}
onClick={onClick} onClick={onClick}
onKeyDown={onClick} onDoubleClick={onDoubleClick}
role="button" role="button"
tabIndex="0" tabIndex="0"
> >
<div <div ref={drag}>
className={classnames( <div
'flex flex-1 items-center justify-center rounded-md bg-black text-base text-white overflow-hidden mb-2 min-h-32', className={classnames(
isActive 'flex flex-1 items-center justify-center rounded-md bg-black text-base text-white overflow-hidden mb-2 min-h-32',
? 'border-2 border-primary-light' isActive
: 'border border-secondary-light hover:border-blue-300' ? 'border-2 border-primary-light'
)} : 'border border-secondary-light group-focus:border-blue-300 hover:border-blue-300'
> )}
{imageSrc ? ( >
<img {imageSrc ? (
src={imageSrc} <img
alt={imageAltText} src={imageSrc}
className="object-none min-h-32" alt={imageAltText}
/> className="object-none min-h-32"
) : ( />
<div>{imageAltText}</div> ) : (
)} <div>{imageAltText}</div>
</div> )}
<div className="flex flex-row items-center flex-1 text-base text-blue-300">
<div className="mr-4">
<span className="font-bold text-primary-main">{'S: '}</span>
{seriesNumber}
</div> </div>
<div className="flex flex-row items-center flex-1"> <div className="flex flex-row items-center flex-1 text-base text-blue-300">
<Icon name="group-layers" className="w-3 mr-2" /> {numInstances} <div className="mr-4">
<span className="font-bold text-primary-main">{'S: '}</span>
{seriesNumber}
</div>
<div className="flex flex-row items-center flex-1">
<Icon name="group-layers" className="w-3 mr-2" /> {numInstances}
</div>
</div> </div>
<div className="text-base text-white break-all">{description}</div>
</div> </div>
<div className="text-base text-white break-all">{description}</div>
</div> </div>
); );
}; };
Thumbnail.propTypes = { Thumbnail.propTypes = {
displaySetInstanceUID: PropTypes.string.isRequired,
className: PropTypes.string, className: PropTypes.string,
imageSrc: PropTypes.string, imageSrc: PropTypes.string,
/** /**
@ -95,6 +102,7 @@ Thumbnail.propTypes = {
numInstances: PropTypes.number.isRequired, numInstances: PropTypes.number.isRequired,
isActive: PropTypes.bool.isRequired, isActive: PropTypes.bool.isRequired,
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
onDoubleClick: PropTypes.func.isRequired,
}; };
Thumbnail.defaultProps = { Thumbnail.defaultProps = {

21
platform/ui/src/components/ThumbnailList/ThumbnailList.jsx
View File

@ -5,8 +5,9 @@ import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '@ohif/ui';
const ThumbnailList = ({ const ThumbnailList = ({
thumbnails, thumbnails,
thumbnailActive, activeDisplaySetInstanceUID,
onThumbnailClick, onThumbnailClick,
onThumbnailDoubleClick,
onClickUntrack, onClickUntrack,
}) => { }) => {
return ( return (
@ -26,7 +27,8 @@ const ThumbnailList = ({
imageSrc, imageSrc,
imageAltText, imageAltText,
}) => { }) => {
const isActive = thumbnailActive === displaySetInstanceUID; const isActive =
activeDisplaySetInstanceUID === displaySetInstanceUID;
switch (componentType) { switch (componentType) {
case 'thumbnail': case 'thumbnail':
@ -43,6 +45,9 @@ const ThumbnailList = ({
viewportIdentificator={viewportIdentificator} viewportIdentificator={viewportIdentificator}
isActive={isActive} isActive={isActive}
onClick={() => onThumbnailClick(displaySetInstanceUID)} onClick={() => onThumbnailClick(displaySetInstanceUID)}
onDoubleClick={() =>
onThumbnailDoubleClick(displaySetInstanceUID)
}
/> />
); );
case 'thumbnailTracked': case 'thumbnailTracked':
@ -60,12 +65,16 @@ const ThumbnailList = ({
isTracked={isTracked} isTracked={isTracked}
isActive={isActive} isActive={isActive}
onClick={() => onThumbnailClick(displaySetInstanceUID)} onClick={() => onThumbnailClick(displaySetInstanceUID)}
onDoubleClick={() =>
onThumbnailDoubleClick(displaySetInstanceUID)
}
onClickUntrack={() => onClickUntrack(displaySetInstanceUID)} onClickUntrack={() => onClickUntrack(displaySetInstanceUID)}
/> />
); );
case 'thumbnailNoImage': case 'thumbnailNoImage':
return ( return (
<ThumbnailNoImage <ThumbnailNoImage
isActive={isActive}
key={displaySetInstanceUID} key={displaySetInstanceUID}
displaySetInstanceUID={displaySetInstanceUID} displaySetInstanceUID={displaySetInstanceUID}
dragData={dragData} dragData={dragData}
@ -73,6 +82,9 @@ const ThumbnailList = ({
seriesDate={seriesDate} seriesDate={seriesDate}
description={description} description={description}
onClick={() => onThumbnailClick(displaySetInstanceUID)} onClick={() => onThumbnailClick(displaySetInstanceUID)}
onDoubleClick={() =>
onThumbnailDoubleClick(displaySetInstanceUID)
}
/> />
); );
default: default:
@ -114,8 +126,9 @@ ThumbnailList.propTypes = {
}), }),
}) })
), ),
thumbnailActive: PropTypes.string, activeDisplaySetInstanceUID: PropTypes.string,
onThumbnailClick: PropTypes.func, onThumbnailClick: PropTypes.func.isRequired,
onThumbnailDoubleClick: PropTypes.func.isRequired,
onClickUntrack: PropTypes.func.isRequired, onClickUntrack: PropTypes.func.isRequired,
}; };

54
platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
View File

@ -1,9 +1,9 @@
import React from 'react'; import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import PropTypes from 'prop-types';
import { useDrag } from 'react-dnd'; import { useDrag } from 'react-dnd';
import { Icon } from '@ohif/ui'; import { Icon } from '@ohif/ui';
import blurHandlerListener from '../../utils/blurHandlerListener';
const ThumbnailNoImage = ({ const ThumbnailNoImage = ({
displaySetInstanceUID, displaySetInstanceUID,
@ -11,7 +11,9 @@ const ThumbnailNoImage = ({
seriesDate, seriesDate,
modality, modality,
onClick, onClick,
onDoubleClick,
dragData, dragData,
isActive,
}) => { }) => {
const [collectedProps, drag, dragPreview] = useDrag({ const [collectedProps, drag, dragPreview] = useDrag({
item: { ...dragData }, item: { ...dragData },
@ -20,26 +22,34 @@ const ThumbnailNoImage = ({
}, },
}); });
const thumbnailElement = useRef(null);
return ( return (
<div <div
ref={drag} ref={thumbnailElement}
className={'flex flex-row flex-1 px-4 py-3 cursor-pointer'} onFocus={() => 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'
)}
id={`thumbnail-${displaySetInstanceUID}`} id={`thumbnail-${displaySetInstanceUID}`}
onClick={onClick} onClick={onClick}
onKeyDown={onClick} onDoubleClick={onDoubleClick}
role="button" role="button"
tabIndex="0" tabIndex="0"
> >
<div className="flex flex-col flex-1"> <div ref={drag}>
<div className="flex flex-row items-center flex-1 mb-2"> <div className="flex flex-col flex-1">
<Icon name="list-bullets" className="w-12 text-secondary-light" /> <div className="flex flex-row items-center flex-1 mb-2">
<div className="px-3 mr-4 text-lg text-white rounded-sm bg-primary-main"> <Icon name="list-bullets" className="w-12 text-secondary-light" />
{modality} <div className="px-3 mr-4 text-lg text-white rounded-sm bg-primary-main">
{modality}
</div>
<span className="text-base text-blue-300">{seriesDate}</span>
</div>
<div className="ml-12 text-base text-white break-all">
{description}
</div> </div>
<span className="text-base text-blue-300">{seriesDate}</span>
</div>
<div className="ml-12 text-base text-white break-all">
{description}
</div> </div>
</div> </div>
</div> </div>
@ -47,10 +57,24 @@ const ThumbnailNoImage = ({
}; };
ThumbnailNoImage.propTypes = { ThumbnailNoImage.propTypes = {
displaySetInstanceUID: PropTypes.string.isRequired,
/**
* 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, description: PropTypes.string.isRequired,
modality: PropTypes.string.isRequired, modality: PropTypes.string.isRequired,
seriesDate: PropTypes.string.isRequired, seriesDate: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
onDoubleClick: PropTypes.func.isRequired,
isActive: PropTypes.bool.isRequired,
}; };
export default ThumbnailNoImage; export default ThumbnailNoImage;

5
platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx
View File

@ -14,6 +14,7 @@ const ThumbnailTracked = ({
numInstances, numInstances,
dragData, dragData,
onClick, onClick,
onDoubleClick,
onClickUntrack, onClickUntrack,
viewportIdentificator, viewportIdentificator,
isTracked, isTracked,
@ -72,6 +73,7 @@ const ThumbnailTracked = ({
)} )}
</div> </div>
<Thumbnail <Thumbnail
displaySetInstanceUID={displaySetInstanceUID}
imageSrc={imageSrc} imageSrc={imageSrc}
imageAltText={imageAltText} imageAltText={imageAltText}
dragData={dragData} dragData={dragData}
@ -80,6 +82,7 @@ const ThumbnailTracked = ({
numInstances={numInstances} numInstances={numInstances}
isActive={isActive} isActive={isActive}
onClick={onClick} onClick={onClick}
onDoubleClick={onDoubleClick}
/> />
</div> </div>
); );
@ -97,6 +100,7 @@ ThumbnailTracked.propTypes = {
/** Must match the "type" a dropTarget expects */ /** Must match the "type" a dropTarget expects */
type: PropTypes.string.isRequired, type: PropTypes.string.isRequired,
}), }),
displaySetInstanceUID: PropTypes.string.isRequired,
className: PropTypes.string, className: PropTypes.string,
imageSrc: PropTypes.string, imageSrc: PropTypes.string,
imageAltText: PropTypes.string, imageAltText: PropTypes.string,
@ -104,6 +108,7 @@ ThumbnailTracked.propTypes = {
seriesNumber: PropTypes.number.isRequired, seriesNumber: PropTypes.number.isRequired,
numInstances: PropTypes.number.isRequired, numInstances: PropTypes.number.isRequired,
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
onDoubleClick: PropTypes.func.isRequired,
onClickUntrack: PropTypes.func.isRequired, onClickUntrack: PropTypes.func.isRequired,
viewportIdentificator: PropTypes.string, viewportIdentificator: PropTypes.string,
isTracked: PropTypes.bool, isTracked: PropTypes.bool,

11
platform/ui/src/contextProviders/ViewportGridProvider.jsx
View File

@ -10,7 +10,11 @@ import PropTypes from 'prop-types';
const DEFAULT_STATE = { const DEFAULT_STATE = {
numRows: 1, numRows: 1,
numCols: 1, numCols: 1,
viewports: [], viewports: [
// {
// displaySetInstanceUID: string,
// }
],
activeViewportIndex: 0, activeViewportIndex: 0,
}; };
@ -19,8 +23,9 @@ export const ViewportGridContext = createContext(DEFAULT_STATE);
export function ViewportGridProvider({ children, service }) { export function ViewportGridProvider({ children, service }) {
const viewportGridReducer = (state, action) => { const viewportGridReducer = (state, action) => {
switch (action.type) { switch (action.type) {
case 'SET_ACTIVE_VIEWPORT_INDEX': case 'SET_ACTIVE_VIEWPORT_INDEX': {
return { ...state, ...{ activeViewportIndex: action.payload } }; return { ...state, ...{ activeViewportIndex: action.payload } };
}
case 'SET_DISPLAYSET_FOR_VIEWPORT': { case 'SET_DISPLAYSET_FOR_VIEWPORT': {
const { viewportIndex, displaySetInstanceUID } = action.payload; const { viewportIndex, displaySetInstanceUID } = action.payload;
const viewports = state.viewports.slice(); const viewports = state.viewports.slice();
@ -55,7 +60,7 @@ export function ViewportGridProvider({ children, service }) {
const [viewportGridState, dispatch] = useReducer( const [viewportGridState, dispatch] = useReducer(
viewportGridReducer, viewportGridReducer,
DEFAULT_STATE, DEFAULT_STATE
); );
const getState = useCallback(() => viewportGridState, [viewportGridState]); const getState = useCallback(() => viewportGridState, [viewportGridState]);

10
platform/ui/src/utils/blurHandlerListener.js Normal file
View File

@ -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);
};

2
platform/ui/tailwind.config.js
View File

@ -721,7 +721,7 @@ module.exports = {
backgroundRepeat: ['responsive'], backgroundRepeat: ['responsive'],
backgroundSize: ['responsive'], backgroundSize: ['responsive'],
borderCollapse: ['responsive'], borderCollapse: ['responsive'],
borderColor: ['responsive', 'hover', 'focus', 'active'], borderColor: ['responsive', 'hover', 'focus', 'active', 'group-focus'],
borderRadius: ['responsive', 'focus', 'first', 'last'], borderRadius: ['responsive', 'focus', 'first', 'last'],
borderStyle: ['responsive', 'focus'], borderStyle: ['responsive', 'focus'],
borderWidth: ['responsive', 'focus', 'first', 'last'], borderWidth: ['responsive', 'focus', 'first', 'last'],