From f377153b60157883f0c15473126a2d666b910713 Mon Sep 17 00:00:00 2001 From: Alireza Date: Fri, 28 Apr 2023 11:06:03 -0400 Subject: [PATCH] fix(viewportDialog): viewportDialoge not appearing in non-tracked viewports (#3071) * fix: viewportdialoge not appearing in non-tracked viewports * feat(viewports): Introduce useViewportDialog and remove deprecated API This commit introduces the `useViewportDialog` hook and replaces the deprecated `viewportDialogApi` with the new `viewportDialogState`. Additionally, the notifications in `OHIFCornerstoneRTViewport` and `OHIFCornerstoneViewport` have been removed. Finally, the `CinePlayer` component now accepts optional parameters. * fix tests --- .../viewports/OHIFCornerstoneRTViewport.tsx | 15 --- .../viewports/OHIFCornerstoneSEGViewport.tsx | 15 --- .../viewports/OHIFCornerstoneSRViewport.tsx | 11 -- .../src/Viewport/OHIFCornerstoneViewport.tsx | 111 +++++++++++------- .../viewports/TrackedCornerstoneViewport.tsx | 12 -- .../src/components/CinePlayer/CinePlayer.tsx | 16 +-- .../OHIFCornerstoneToolbar.spec.js | 8 +- .../OHIFMeasurementPanel.spec.js | 8 +- 8 files changed, 78 insertions(+), 118 deletions(-) diff --git a/extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx b/extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx index 29adb47d5..b7708968c 100644 --- a/extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx +++ b/extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx @@ -2,10 +2,8 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; import OHIF, { utils } from '@ohif/core'; import { - Notification, ViewportActionBar, useViewportGrid, - useViewportDialog, LoadingIndicatorTotalPercent, } from '@ohif/ui'; @@ -47,7 +45,6 @@ function OHIFCornerstoneRTViewport(props) { const rtDisplaySet = displaySets[0]; const [viewportGrid, viewportGridService] = useViewportGrid(); - const [viewportDialogState, viewportDialogApi] = useViewportDialog(); // States const [isToolGroupCreated, setToolGroupCreated] = useState(false); @@ -363,18 +360,6 @@ function OHIFCornerstoneRTViewport(props) { /> )} {getCornerstoneViewport()} -
- {viewportDialogState.viewportIndex === viewportIndex && ( - - )} -
{childrenWithProps} diff --git a/extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx b/extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx index e901ac0be..08ed004f0 100644 --- a/extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx +++ b/extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx @@ -4,8 +4,6 @@ import { useTranslation } from 'react-i18next'; import OHIF, { utils } from '@ohif/core'; import { LoadingIndicatorTotalPercent, - Notification, - useViewportDialog, useViewportGrid, ViewportActionBar, } from '@ohif/ui'; @@ -48,7 +46,6 @@ function OHIFCornerstoneSEGViewport(props) { const segDisplaySet = displaySets[0]; const [viewportGrid, viewportGridService] = useViewportGrid(); - const [viewportDialogState, viewportDialogApi] = useViewportDialog(); // States const [isToolGroupCreated, setToolGroupCreated] = useState(false); @@ -366,18 +363,6 @@ function OHIFCornerstoneSEGViewport(props) { /> )} {getCornerstoneViewport()} -
- {viewportDialogState.viewportIndex === viewportIndex && ( - - )} -
{childrenWithProps} diff --git a/extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx b/extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx index 75b34893f..4ef8f2bdf 100644 --- a/extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx +++ b/extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx @@ -401,17 +401,6 @@ function OHIFCornerstoneSRViewport(props) {
{getCornerstoneViewport()} -
- {viewportDialogState.viewportIndex === viewportIndex && ( - - )} -
{childrenWithProps}
diff --git a/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx b/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx index d74a3b99b..1071814bc 100644 --- a/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx +++ b/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx @@ -8,9 +8,14 @@ import { getEnabledElement, StackViewport, utilities as csUtils, - CONSTANTS, } from '@cornerstonejs/core'; -import { CinePlayer, useCine, useViewportGrid } from '@ohif/ui'; +import { + CinePlayer, + useCine, + useViewportGrid, + Notification, + useViewportDialog, +} from '@ohif/ui'; import { IStackViewport, IVolumeViewport, @@ -132,6 +137,8 @@ const OHIFCornerstoneViewport = React.memo(props => { stateSyncService, } = servicesManager.services as CornerstoneServices; + const [viewportDialogState] = useViewportDialog(); + const cineHandler = () => { if (!cines || !cines[viewportIndex] || !enabledVPElement) { return; @@ -455,50 +462,64 @@ const OHIFCornerstoneViewport = React.memo(props => { }, [displaySets, elementRef, viewportIndex]); return ( -
- -
e.preventDefault()} - onMouseDown={e => e.preventDefault()} - ref={elementRef} - >
- - {isCineEnabled && ( - - cineService.setCine({ - id: activeViewportIndex, - isPlaying, - }) - } - onFrameRateChange={frameRate => - cineService.setCine({ - id: activeViewportIndex, - frameRate, - }) - } + +
+ - )} -
+
e.preventDefault()} + onMouseDown={e => e.preventDefault()} + ref={elementRef} + >
+ + {isCineEnabled && ( + + cineService.setCine({ + id: activeViewportIndex, + isPlaying, + }) + } + onFrameRateChange={frameRate => + cineService.setCine({ + id: activeViewportIndex, + frameRate, + }) + } + /> + )} +
+
+ {viewportDialogState.viewportIndex === viewportIndex && ( + + )} +
+ ); }, areEqual); diff --git a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx index 5e5393f53..47da82c8b 100644 --- a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx +++ b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx @@ -159,18 +159,6 @@ function TrackedCornerstoneViewport(props) { {/* TODO: Viewport interface to accept stack or layers of content like this? */}
{getCornerstoneViewport()} -
- {viewportDialogState.viewportIndex === viewportIndex && ( - - )} -
); diff --git a/platform/ui/src/components/CinePlayer/CinePlayer.tsx b/platform/ui/src/components/CinePlayer/CinePlayer.tsx index 6ede1bf11..7c52b47fd 100644 --- a/platform/ui/src/components/CinePlayer/CinePlayer.tsx +++ b/platform/ui/src/components/CinePlayer/CinePlayer.tsx @@ -9,10 +9,10 @@ import classNames from 'classnames'; export type CinePlayerProps = { className: string; isPlaying: boolean; - minFrameRate: number; - maxFrameRate: number; - stepFrameRate: number; - frameRate: number; + minFrameRate?: number; + maxFrameRate?: number; + stepFrameRate?: number; + frameRate?: number; onFrameRateChange: (value: number) => void; onPlayPauseChange: (value: boolean) => void; onClose: () => void; @@ -116,12 +116,12 @@ CinePlayer.defaultProps = { CinePlayer.propTypes = { /** Minimum value for range slider */ - minFrameRate: PropTypes.number.isRequired, + minFrameRate: PropTypes.number, /** Maximum value for range slider */ - maxFrameRate: PropTypes.number.isRequired, + maxFrameRate: PropTypes.number, /** Increment range slider can "step" in either direction */ - stepFrameRate: PropTypes.number.isRequired, - frameRate: PropTypes.number.isRequired, + stepFrameRate: PropTypes.number, + frameRate: PropTypes.number, /** 'true' if playing, 'false' if paused */ isPlaying: PropTypes.bool.isRequired, onPlayPauseChange: PropTypes.func, diff --git a/platform/viewer/cypress/integration/measurement-tracking/OHIFCornerstoneToolbar.spec.js b/platform/viewer/cypress/integration/measurement-tracking/OHIFCornerstoneToolbar.spec.js index aba69f17f..c20aa75c6 100644 --- a/platform/viewer/cypress/integration/measurement-tracking/OHIFCornerstoneToolbar.spec.js +++ b/platform/viewer/cypress/integration/measurement-tracking/OHIFCornerstoneToolbar.spec.js @@ -111,12 +111,8 @@ describe('OHIF Cornerstone Toolbar', () => { it('checks if Length annotation can be added to viewport and shows up in the measurements panel', () => { //Click on button and verify if icon is active on toolbar cy.addLengthMeasurement(); - cy.get('[data-cy="measurement-tracking-prompt-begin-tracking"]').should( - 'exist' - ); - cy.get('[data-cy="measurement-tracking-prompt-begin-tracking"]').should( - 'be.visible' - ); + cy.get('[data-cy="viewport-notification"]').should('exist'); + cy.get('[data-cy="viewport-notification"]').should('be.visible'); cy.get('[data-cy="prompt-begin-tracking-yes"]').click(); //Verify the measurement exists in the table diff --git a/platform/viewer/cypress/integration/measurement-tracking/OHIFMeasurementPanel.spec.js b/platform/viewer/cypress/integration/measurement-tracking/OHIFMeasurementPanel.spec.js index d380d9544..c96d77701 100644 --- a/platform/viewer/cypress/integration/measurement-tracking/OHIFMeasurementPanel.spec.js +++ b/platform/viewer/cypress/integration/measurement-tracking/OHIFMeasurementPanel.spec.js @@ -25,12 +25,8 @@ describe('OHIF Measurement Panel', function() { it('checks if measurement item can be Relabeled under Measurements panel', function() { // Add length measurement cy.addLengthMeasurement(); - cy.get('[data-cy="measurement-tracking-prompt-begin-tracking"]').should( - 'exist' - ); - cy.get('[data-cy="measurement-tracking-prompt-begin-tracking"]').should( - 'be.visible' - ); + cy.get('[data-cy="viewport-notification"]').should('exist'); + cy.get('[data-cy="viewport-notification"]').should('be.visible'); cy.get('[data-cy="prompt-begin-tracking-yes"]').click(); cy.get('[data-cy="measurement-item"]').click();