From 59f8cd1a06d63ae3eadcd4e0914f41ad05020b48 Mon Sep 17 00:00:00 2001 From: Alireza Date: Thu, 2 Jun 2022 17:14:49 -0400 Subject: [PATCH 1/5] feat: use the new prefetch stack in the cs3d --- .../Viewport/Overlays/CornerstoneOverlays.tsx | 4 +- .../Overlays/ViewportImageScrollbar.tsx | 50 ++++++------- .../Overlays/ViewportLoadingIndicator.tsx | 70 +++++++++---------- extensions/cornerstone/src/commandsModule.js | 2 +- extensions/cornerstone/src/init.js | 16 +++-- .../CornerstoneViewportService.ts | 1 - 6 files changed, 72 insertions(+), 71 deletions(-) diff --git a/extensions/cornerstone/src/Viewport/Overlays/CornerstoneOverlays.tsx b/extensions/cornerstone/src/Viewport/Overlays/CornerstoneOverlays.tsx index 0c6c861bc29..db367fe2cad 100644 --- a/extensions/cornerstone/src/Viewport/Overlays/CornerstoneOverlays.tsx +++ b/extensions/cornerstone/src/Viewport/Overlays/CornerstoneOverlays.tsx @@ -52,7 +52,7 @@ function CornerstoneOverlays(props) { } return ( - <> +
- +
); } diff --git a/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx b/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx index d33aa8dce94..7928c72584d 100644 --- a/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx +++ b/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx @@ -1,7 +1,10 @@ -import React, { useCallback, useEffect } from 'react'; +import React, { useCallback, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import { Enums, Types, utilities } from '@cornerstonejs/core'; -import { utilities as csToolsUtils } from '@cornerstonejs/tools'; +import { + utilities as csToolsUtils, + Enums as csToolsEnums, +} from '@cornerstonejs/tools'; import { ImageScrollbar } from '@ohif/ui'; function CornerstoneImageScrollbar({ @@ -13,8 +16,12 @@ function CornerstoneImageScrollbar({ scrollbarHeight, CornerstoneViewportService, }) { - const onImageScrollbarChange = useCallback( - (imageIndex, viewportIndex) => { + const slideTimeout = useRef(null); + + const onImageScrollbarChange = (imageIndex, viewportIndex) => { + clearTimeout(slideTimeout.current); + + slideTimeout.current = setTimeout(() => { const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex( viewportIndex ); @@ -30,9 +37,8 @@ function CornerstoneImageScrollbar({ imageIndex: imageIndex, }); }); - }, - [viewportIndex, viewportData, imageSliceData] - ); + }, 40); + }; useEffect(() => { if (!viewportData) { @@ -78,40 +84,34 @@ function CornerstoneImageScrollbar({ }, [viewportIndex, viewportData]); useEffect(() => { - if ( - !viewportData || - viewportData.viewportType !== Enums.ViewportType.STACK - ) { + if (viewportData?.viewportType !== Enums.ViewportType.STACK) { return; } const updateStackIndex = event => { - const { imageId } = event.detail; + const { newImageIdIndex } = event.detail; // find the index of imageId in the imageIds - const index = viewportData?.imageIds?.indexOf(imageId); - if (index !== -1) { - setImageSliceData({ - imageIndex: index, - numberOfSlices: viewportData.imageIds.length, - }); - } + setImageSliceData({ + imageIndex: newImageIdIndex, + numberOfSlices: viewportData.imageIds.length, + }); }; - element.addEventListener(Enums.Events.STACK_NEW_IMAGE, updateStackIndex); + element.addEventListener( + csToolsEnums.Events.STACK_SCROLL, + updateStackIndex + ); return () => { element.removeEventListener( - Enums.Events.STACK_NEW_IMAGE, + csToolsEnums.Events.STACK_SCROLL, updateStackIndex ); }; }, [viewportData, element]); useEffect(() => { - if ( - !viewportData || - viewportData.viewportType !== Enums.ViewportType.ORTHOGRAPHIC - ) { + if (viewportData?.viewportType !== Enums.ViewportType.ORTHOGRAPHIC) { return; } diff --git a/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx b/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx index 1a7d35ae171..54e74ededbf 100644 --- a/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx +++ b/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx @@ -1,6 +1,7 @@ -import React, { useEffect, useState, useRef } from 'react'; +import React, { useEffect, useState, useCallback, useRef } from 'react'; import PropTypes from 'prop-types'; import { Enums } from '@cornerstonejs/core'; +import { Enums as csToolsEnums } from '@cornerstonejs/tools'; function ViewportLoadingIndicator({ viewportData, element }) { const [loading, setLoading] = useState(false); @@ -9,39 +10,37 @@ function ViewportLoadingIndicator({ viewportData, element }) { const loadIndicatorRef = useRef(null); const imageIdToBeLoaded = useRef(null); - useEffect(() => { - if (!element) { - return; - } - - const setLoadingState = evt => { - clearTimeout(loadIndicatorRef.current); + const setLoadingStateScroll = useCallback( + evt => { imageIdToBeLoaded.current = evt.detail.imageId; - loadIndicatorRef.current = setTimeout(() => { - if (imageIdToBeLoaded.current === evt.detail.imageId) { - setLoading(true); - } - }, 50); - }; + if (loading) { + return; + } - const setFinishLoadingState = evt => { - clearTimeout(loadIndicatorRef.current); + setLoading(true); + }, + [loading] + ); - setLoading(false); - imageIdToBeLoaded.current = null; - }; + const setFinishLoadingState = evt => { + setLoading(false); + }; - const setErrorState = evt => { - clearTimeout(loadIndicatorRef.current); + const setErrorState = evt => { + clearTimeout(loadIndicatorRef.current); - if (imageIdToBeLoaded.current === evt.detail.imageId) { - setError(evt.detail.error); - imageIdToBeLoaded.current = null; - } - }; + if (imageIdToBeLoaded.current === evt.detail.imageId) { + setError(evt.detail.error); + imageIdToBeLoaded.current = null; + } + }; - element.addEventListener(Enums.Events.PRE_STACK_NEW_IMAGE, setLoadingState); + useEffect(() => { + element.addEventListener( + csToolsEnums.Events.STACK_SCROLL, + setLoadingStateScroll + ); element.addEventListener(Enums.Events.IMAGE_LOAD_ERROR, setErrorState); element.addEventListener( Enums.Events.STACK_NEW_IMAGE, @@ -50,8 +49,8 @@ function ViewportLoadingIndicator({ viewportData, element }) { return () => { element.removeEventListener( - Enums.Events.PRE_STACK_NEW_IMAGE, - setLoadingState + csToolsEnums.Events.STACK_SCROLL, + setLoadingStateScroll ); element.removeEventListener( @@ -81,13 +80,13 @@ function ViewportLoadingIndicator({ viewportData, element }) { if (loading) { return ( - <> -
-
-

Loading...

-
+ // IMPORTANT: we need to use the pointer-events-none class to prevent the loading indicator from + // interacting with the mouse, since scrolling should propagate to the viewport underneath +
+
+

Loading...

- +
); } @@ -97,6 +96,7 @@ function ViewportLoadingIndicator({ viewportData, element }) { ViewportLoadingIndicator.propTypes = { percentComplete: PropTypes.number, error: PropTypes.object, + element: PropTypes.object, }; ViewportLoadingIndicator.defaultProps = { diff --git a/extensions/cornerstone/src/commandsModule.js b/extensions/cornerstone/src/commandsModule.js index b086998113a..e0953bafac8 100644 --- a/extensions/cornerstone/src/commandsModule.js +++ b/extensions/cornerstone/src/commandsModule.js @@ -327,7 +327,7 @@ const commandsModule = ({ servicesManager }) => { const { viewport } = enabledElement; const options = { delta: direction }; - csToolsUtils.stackScrollTool.scrollThroughStack(viewport, options); + csToolsUtils.scroll(viewport, options); }, async createSegmentationForDisplaySet({ displaySetInstanceUID }) { const volumeId = displaySetInstanceUID; diff --git a/extensions/cornerstone/src/init.js b/extensions/cornerstone/src/init.js index e15543f6cce..5c55f54951f 100644 --- a/extensions/cornerstone/src/init.js +++ b/extensions/cornerstone/src/init.js @@ -93,7 +93,7 @@ export default async function init({ imageLoadPoolManager.maxNumRequests = { interaction: 100, thumbnail: 75, - prefetch: 20, + prefetch: 5, }; initWADOImageLoader(UserAuthenticationService, appConfig); @@ -260,9 +260,10 @@ export default async function init({ contextMenuHandleClick ); - // element.addEventListener(EVENTS.NEW_STACK_SET, () => - // utilities.stackPrefetch.enable(element) - // ); + eventTarget.addEventListener(EVENTS.NEW_STACK_SET, evt => { + const { element } = evt.detail; + utilities.stackPrefetch.enable(element); + }); } function elementDisabledHandler(evt) { @@ -276,9 +277,10 @@ export default async function init({ contextMenuHandleClick ); - // element.removeEventListener(EVENTS.NEW_STACK_SET, () => - // utilities.stackPrefetch.disable(element) - // ); + eventTarget.removeEventListener(EVENTS.NEW_STACK_SET, evt => { + const { element } = evt.detail; + utilities.stackPrefetch.disable(element); + }); } eventTarget.addEventListener( diff --git a/extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts b/extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts index 46610b6a22a..2cd56f82330 100644 --- a/extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts +++ b/extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts @@ -293,7 +293,6 @@ class CornerstoneViewportService implements IViewportService { viewport.setStack(imageIds, initialImageIndexToUse).then(() => { viewport.setProperties(properties); - csUtils.prefetchStack(imageIds); }); } From 02efcaf60e6cfa5e88aa9714e3a15ef3ca5d3573 Mon Sep 17 00:00:00 2001 From: Alireza Date: Fri, 3 Jun 2022 14:55:53 -0400 Subject: [PATCH 2/5] use viewport scroll api for stack viewport --- .../Overlays/ViewportImageScrollbar.tsx | 47 ++++++------------- .../Overlays/ViewportLoadingIndicator.tsx | 7 +-- .../src/viewports/ViewportLoadingIndicator.js | 39 --------------- 3 files changed, 17 insertions(+), 76 deletions(-) delete mode 100644 extensions/measurement-tracking/src/viewports/ViewportLoadingIndicator.js diff --git a/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx b/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx index 7928c72584d..170d3faddb8 100644 --- a/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx +++ b/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx @@ -1,10 +1,7 @@ -import React, { useCallback, useEffect, useRef } from 'react'; +import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import { Enums, Types, utilities } from '@cornerstonejs/core'; -import { - utilities as csToolsUtils, - Enums as csToolsEnums, -} from '@cornerstonejs/tools'; +import { utilities as csToolsUtils } from '@cornerstonejs/tools'; import { ImageScrollbar } from '@ohif/ui'; function CornerstoneImageScrollbar({ @@ -16,28 +13,20 @@ function CornerstoneImageScrollbar({ scrollbarHeight, CornerstoneViewportService, }) { - const slideTimeout = useRef(null); - const onImageScrollbarChange = (imageIndex, viewportIndex) => { - clearTimeout(slideTimeout.current); - - slideTimeout.current = setTimeout(() => { - const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex( - viewportIndex - ); + const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex( + viewportIndex + ); - const viewportId = viewportInfo.getViewportId(); - const viewport = CornerstoneViewportService.getCornerstoneViewport( - viewportId - ); + const viewportId = viewportInfo.getViewportId(); + const viewport = CornerstoneViewportService.getCornerstoneViewport( + viewportId + ); - csToolsUtils.jumpToSlice(viewport.element, { imageIndex }).then(() => { - setImageSliceData({ - ...imageSliceData, - imageIndex: imageIndex, - }); - }); - }, 40); + csToolsUtils.jumpToSlice(viewport.element, { + imageIndex, + debounceLoading: true, + }); }; useEffect(() => { @@ -97,16 +86,10 @@ function CornerstoneImageScrollbar({ }); }; - element.addEventListener( - csToolsEnums.Events.STACK_SCROLL, - updateStackIndex - ); + element.addEventListener(Enums.Events.STACK_SCROLL, updateStackIndex); return () => { - element.removeEventListener( - csToolsEnums.Events.STACK_SCROLL, - updateStackIndex - ); + element.removeEventListener(Enums.Events.STACK_SCROLL, updateStackIndex); }; }, [viewportData, element]); diff --git a/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx b/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx index 54e74ededbf..39416ad9e02 100644 --- a/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx +++ b/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx @@ -37,10 +37,7 @@ function ViewportLoadingIndicator({ viewportData, element }) { }; useEffect(() => { - element.addEventListener( - csToolsEnums.Events.STACK_SCROLL, - setLoadingStateScroll - ); + element.addEventListener(Enums.Events.STACK_SCROLL, setLoadingStateScroll); element.addEventListener(Enums.Events.IMAGE_LOAD_ERROR, setErrorState); element.addEventListener( Enums.Events.STACK_NEW_IMAGE, @@ -49,7 +46,7 @@ function ViewportLoadingIndicator({ viewportData, element }) { return () => { element.removeEventListener( - csToolsEnums.Events.STACK_SCROLL, + Enums.Events.STACK_SCROLL, setLoadingStateScroll ); diff --git a/extensions/measurement-tracking/src/viewports/ViewportLoadingIndicator.js b/extensions/measurement-tracking/src/viewports/ViewportLoadingIndicator.js deleted file mode 100644 index 2030d0d238c..00000000000 --- a/extensions/measurement-tracking/src/viewports/ViewportLoadingIndicator.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; - -import PropTypes from 'prop-types'; - -const ViewportLoadingIndicator = ({ error }) => { - if (error) { - return ( - <> -
-
-

Error Loading Image

-

An error has occurred.

-

{error.message}

-
- - ); - } - - return ( - <> -
-
-

Loading...

-
- - ); -}; - -ViewportLoadingIndicator.propTypes = { - percentComplete: PropTypes.number, - error: PropTypes.object, -}; - -ViewportLoadingIndicator.defaultProps = { - percentComplete: 0, - error: null, -}; - -export default ViewportLoadingIndicator; From 834b06e7300cd47bd616f9777ca1be8630c42b90 Mon Sep 17 00:00:00 2001 From: Alireza Date: Fri, 3 Jun 2022 16:35:14 -0400 Subject: [PATCH 3/5] fix cine stop when scrollbar changes --- .../src/Viewport/OHIFCornerstoneViewport.tsx | 2 +- .../Viewport/Overlays/CornerstoneOverlays.tsx | 14 ++++---------- .../Overlays/ViewportImageScrollbar.tsx | 17 +++++++++-------- .../Overlays/ViewportLoadingIndicator.tsx | 1 - .../src/Viewport/Overlays/ViewportOverlay.tsx | 7 +++++-- .../PanelStudyBrowserTracking.tsx | 6 +++--- 6 files changed, 22 insertions(+), 25 deletions(-) diff --git a/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx b/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx index f86ae5ab57e..d193f4f6bb7 100644 --- a/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx +++ b/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx @@ -294,7 +294,7 @@ const OHIFCornerstoneViewport = React.memo(props => { ToolBarService={ToolBarService} element={elementRef.current} scrollbarHeight={scrollbarHeight} - CornerstoneViewportService={CornerstoneViewportService} + servicesManager={servicesManager} />
); diff --git a/extensions/cornerstone/src/Viewport/Overlays/CornerstoneOverlays.tsx b/extensions/cornerstone/src/Viewport/Overlays/CornerstoneOverlays.tsx index db367fe2cad..b3fbf9f6b91 100644 --- a/extensions/cornerstone/src/Viewport/Overlays/CornerstoneOverlays.tsx +++ b/extensions/cornerstone/src/Viewport/Overlays/CornerstoneOverlays.tsx @@ -7,13 +7,8 @@ import ViewportLoadingIndicator from './ViewportLoadingIndicator'; import CornerstoneCacheService from '../../services/ViewportService/CornerstoneCacheService'; function CornerstoneOverlays(props) { - const { - viewportIndex, - ToolBarService, - element, - scrollbarHeight, - CornerstoneViewportService, - } = props; + const { viewportIndex, element, scrollbarHeight, servicesManager } = props; + const { CornerstoneViewportService } = servicesManager.services; const [imageSliceData, setImageSliceData] = useState({ imageIndex: 0, numberOfSlices: 0, @@ -60,14 +55,13 @@ function CornerstoneOverlays(props) { imageSliceData={imageSliceData} setImageSliceData={setImageSliceData} scrollbarHeight={scrollbarHeight} - CornerstoneViewportService={CornerstoneViewportService} + servicesManager={servicesManager} /> diff --git a/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx b/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx index 170d3faddb8..d1a9fd7d7cb 100644 --- a/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx +++ b/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx @@ -11,8 +11,10 @@ function CornerstoneImageScrollbar({ imageSliceData, setImageSliceData, scrollbarHeight, - CornerstoneViewportService, + servicesManager, }) { + const { CineService, CornerstoneViewportService } = servicesManager.services; + const onImageScrollbarChange = (imageIndex, viewportIndex) => { const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex( viewportIndex @@ -23,6 +25,10 @@ function CornerstoneImageScrollbar({ viewportId ); + // on image scrollbar change, stop the CINE if it is playing + CineService.stopClip(element); + CineService.setCine({ id: viewportIndex, isPlaying: false }); + csToolsUtils.jumpToSlice(viewport.element, { imageIndex, debounceLoading: true, @@ -43,15 +49,10 @@ function CornerstoneImageScrollbar({ } if (viewportData.viewportType === Enums.ViewportType.STACK) { - const imageId = viewport.getCurrentImageId(); - const index = viewportData?.imageIds?.indexOf(imageId); - - if (index === -1) { - return; - } + const imageIndex = viewport.getCurrentImageIdIndex(); setImageSliceData({ - imageIndex: index, + imageIndex: imageIndex, numberOfSlices: viewportData.imageIds.length, }); diff --git a/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx b/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx index 39416ad9e02..04fe8828c20 100644 --- a/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx +++ b/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useState, useCallback, useRef } from 'react'; import PropTypes from 'prop-types'; import { Enums } from '@cornerstonejs/core'; -import { Enums as csToolsEnums } from '@cornerstonejs/tools'; function ViewportLoadingIndicator({ viewportData, element }) { const [loading, setLoading] = useState(false); diff --git a/extensions/cornerstone/src/Viewport/Overlays/ViewportOverlay.tsx b/extensions/cornerstone/src/Viewport/Overlays/ViewportOverlay.tsx index 4d10676feb4..6f9261dcda0 100644 --- a/extensions/cornerstone/src/Viewport/Overlays/ViewportOverlay.tsx +++ b/extensions/cornerstone/src/Viewport/Overlays/ViewportOverlay.tsx @@ -11,9 +11,12 @@ function CornerstoneViewportOverlay({ viewportData, imageSliceData, viewportIndex, - CornerstoneViewportService, - ToolBarService, + servicesManager, }) { + const { + CornerstoneViewportService, + ToolBarService, + } = servicesManager.services; const [voi, setVOI] = useState({ windowCenter: null, windowWidth: null }); const [scale, setScale] = useState(1); const [activeTools, setActiveTools] = useState([]); diff --git a/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx b/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx index 67c9ef207d6..655e238b217 100644 --- a/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx +++ b/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx @@ -53,8 +53,8 @@ function PanelStudyBrowserTracking({ }); }; - const activeDisplaySetInstanceUID = - viewports[activeViewportIndex]?.displaySetInstanceUID; + const activeViewportDisplaySetInstanceUIDs = + viewports[activeViewportIndex]?.displaySetInstanceUIDs; const isSingleViewport = numCols === 1 && numRows === 1; @@ -335,7 +335,7 @@ function PanelStudyBrowserTracking({ }} onClickThumbnail={() => {}} onDoubleClickThumbnail={onDoubleClickThumbnailHandler} - activeDisplaySetInstanceUID={activeDisplaySetInstanceUID} + activeDisplaySetInstanceUIDs={activeViewportDisplaySetInstanceUIDs} /> ); } From c5591b62192b5a049e71badb459d36887f78dc95 Mon Sep 17 00:00:00 2001 From: Alireza Date: Mon, 6 Jun 2022 11:24:47 -0400 Subject: [PATCH 4/5] feat: use new prefetch events --- extensions/cornerstone-dicom-sr/package.json | 4 ++-- extensions/cornerstone/package.json | 4 ++-- .../Overlays/ViewportImageScrollbar.tsx | 10 ++++++++-- .../Overlays/ViewportLoadingIndicator.tsx | 7 +++++-- extensions/cornerstone/src/init.js | 10 +++++----- extensions/measurement-tracking/package.json | 4 ++-- platform/viewer/public/config/default.js | 5 +++++ yarn.lock | 18 +++++++++++++----- 8 files changed, 42 insertions(+), 20 deletions(-) diff --git a/extensions/cornerstone-dicom-sr/package.json b/extensions/cornerstone-dicom-sr/package.json index 32800dfdb7d..3b1e381fb9b 100644 --- a/extensions/cornerstone-dicom-sr/package.json +++ b/extensions/cornerstone-dicom-sr/package.json @@ -45,7 +45,7 @@ "dependencies": { "@babel/runtime": "7.16.3", "classnames": "^2.2.6", - "@cornerstonejs/core": "^0.11.0", - "@cornerstonejs/tools": "^0.18.0" + "@cornerstonejs/core": "^0.12.0", + "@cornerstonejs/tools": "^0.19.0" } } diff --git a/extensions/cornerstone/package.json b/extensions/cornerstone/package.json index cc26075ffed..899006a73fe 100644 --- a/extensions/cornerstone/package.json +++ b/extensions/cornerstone/package.json @@ -45,8 +45,8 @@ "@babel/runtime": "7.17.9", "lodash.merge": "^4.6.2", "lodash.debounce": "4.0.8", - "@cornerstonejs/core": "^0.11.0", - "@cornerstonejs/tools": "^0.18.0", + "@cornerstonejs/core": "^0.12.0", + "@cornerstonejs/tools": "^0.19.0", "@cornerstonejs/streaming-image-volume-loader": "^0.3.4", "shader-loader": "^1.3.1", "@kitware/vtk.js": "^24.10.0", diff --git a/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx b/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx index d1a9fd7d7cb..8516bc82906 100644 --- a/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx +++ b/extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx @@ -87,10 +87,16 @@ function CornerstoneImageScrollbar({ }); }; - element.addEventListener(Enums.Events.STACK_SCROLL, updateStackIndex); + element.addEventListener( + Enums.Events.STACK_VIEWPORT_SCROLL, + updateStackIndex + ); return () => { - element.removeEventListener(Enums.Events.STACK_SCROLL, updateStackIndex); + element.removeEventListener( + Enums.Events.STACK_VIEWPORT_SCROLL, + updateStackIndex + ); }; }, [viewportData, element]); diff --git a/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx b/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx index 04fe8828c20..4216ab2f1cf 100644 --- a/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx +++ b/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx @@ -36,7 +36,10 @@ function ViewportLoadingIndicator({ viewportData, element }) { }; useEffect(() => { - element.addEventListener(Enums.Events.STACK_SCROLL, setLoadingStateScroll); + element.addEventListener( + Enums.Events.STACK_VIEWPORT_SCROLL, + setLoadingStateScroll + ); element.addEventListener(Enums.Events.IMAGE_LOAD_ERROR, setErrorState); element.addEventListener( Enums.Events.STACK_NEW_IMAGE, @@ -45,7 +48,7 @@ function ViewportLoadingIndicator({ viewportData, element }) { return () => { element.removeEventListener( - Enums.Events.STACK_SCROLL, + Enums.Events.STACK_VIEWPORT_SCROLL, setLoadingStateScroll ); diff --git a/extensions/cornerstone/src/init.js b/extensions/cornerstone/src/init.js index 5c55f54951f..a3520309e66 100644 --- a/extensions/cornerstone/src/init.js +++ b/extensions/cornerstone/src/init.js @@ -91,9 +91,9 @@ export default async function init({ metaData.addProvider(metadataProvider.get.bind(metadataProvider), 9999); imageLoadPoolManager.maxNumRequests = { - interaction: 100, - thumbnail: 75, - prefetch: 5, + interaction: appConfig?.maxNumRequests?.interaction || 100, + thumbnail: appConfig?.maxNumRequests?.thumbnail || 75, + prefetch: appConfig?.maxNumRequests?.prefetch || 10, }; initWADOImageLoader(UserAuthenticationService, appConfig); @@ -260,7 +260,7 @@ export default async function init({ contextMenuHandleClick ); - eventTarget.addEventListener(EVENTS.NEW_STACK_SET, evt => { + eventTarget.addEventListener(EVENTS.STACK_VIEWPORT_NEW_STACK, evt => { const { element } = evt.detail; utilities.stackPrefetch.enable(element); }); @@ -277,7 +277,7 @@ export default async function init({ contextMenuHandleClick ); - eventTarget.removeEventListener(EVENTS.NEW_STACK_SET, evt => { + eventTarget.removeEventListener(EVENTS.STACK_VIEWPORT_NEW_STACK, evt => { const { element } = evt.detail; utilities.stackPrefetch.disable(element); }); diff --git a/extensions/measurement-tracking/package.json b/extensions/measurement-tracking/package.json index 35a064c9a6f..c0ee48c2c3a 100644 --- a/extensions/measurement-tracking/package.json +++ b/extensions/measurement-tracking/package.json @@ -32,8 +32,8 @@ "peerDependencies": { "@ohif/core": "^3.0.0", "classnames": "^2.2.6", - "@cornerstonejs/core": "^0.11.0", - "@cornerstonejs/tools": "^0.18.0", + "@cornerstonejs/core": "^0.12.0", + "@cornerstonejs/tools": "^0.19.0", "@ohif/extension-cornerstone-dicom-sr": "^3.0.0", "dcmjs": "^0.22.1", "prop-types": "^15.6.2", diff --git a/platform/viewer/public/config/default.js b/platform/viewer/public/config/default.js index 86161bc7899..007f3cbd778 100644 --- a/platform/viewer/public/config/default.js +++ b/platform/viewer/public/config/default.js @@ -5,6 +5,11 @@ window.config = { modes: [], showStudyList: true, maxNumberOfWebWorkers: 3, + maxNumRequests: { + interaction: 100, + thumbnail: 75, + prefetch: 10, + }, // filterQueryParam: false, dataSources: [ { diff --git a/yarn.lock b/yarn.lock index aec08f2c257..dfe070297fe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1322,6 +1322,14 @@ detect-gpu "^4.0.7" lodash.clonedeep "4.5.0" +"@cornerstonejs/core@^0.12.0": + version "0.12.0" + resolved "https://registry.yarnpkg.com/@cornerstonejs/core/-/core-0.12.0.tgz#3d40e9654cce75044e0db2609df34b7897fca0b8" + integrity sha512-YJcEMfqb5ckhxwkP93BYfs29m34fhgXmH+VvAyTsrqzeFFjUmhhSENTIgFU9yz5wo6NikzpsbFmsW9GfjC/gLw== + dependencies: + detect-gpu "^4.0.7" + lodash.clonedeep "4.5.0" + "@cornerstonejs/streaming-image-volume-loader@^0.3.4": version "0.3.4" resolved "https://registry.yarnpkg.com/@cornerstonejs/streaming-image-volume-loader/-/streaming-image-volume-loader-0.3.4.tgz#453f4831474e99082d72c3b9d5df4ecce337564c" @@ -1330,12 +1338,12 @@ "@cornerstonejs/core" "^0.11.0" cornerstone-wado-image-loader "^4.1.2" -"@cornerstonejs/tools@^0.18.0": - version "0.18.0" - resolved "https://registry.yarnpkg.com/@cornerstonejs/tools/-/tools-0.18.0.tgz#98594fda180a521495bee022af56ef5d01aaec80" - integrity sha512-tpeqd3nuwDpUfhZc5u7ncIsWmgNW1F8kZ4bAyn2p2ovrmmN4WSy2qc8Eg9Cgw6tMknsVuimOL5svnhd++Y7WNw== +"@cornerstonejs/tools@^0.19.0": + version "0.19.0" + resolved "https://registry.yarnpkg.com/@cornerstonejs/tools/-/tools-0.19.0.tgz#c2aa965e8f04811a3494a7e56f78fc6f4841608c" + integrity sha512-/XZ5cPJINkBpcULzsdZjf5vQ45p536esPhXGXPUIcB9a7sWqPKUhYI5Rp6n/ITtet6IL51NE0S2Ro8lq4eP01w== dependencies: - "@cornerstonejs/core" "^0.11.0" + "@cornerstonejs/core" "^0.12.0" lodash.clonedeep "4.5.0" "@csstools/postcss-cascade-layers@^1.0.2": From d64631c3461cd9974a16980c4b9f4ba5af562bb8 Mon Sep 17 00:00:00 2001 From: Alireza Date: Mon, 6 Jun 2022 11:37:04 -0400 Subject: [PATCH 5/5] fix loading state to not show repeatedly --- .../Overlays/ViewportLoadingIndicator.tsx | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx b/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx index 4216ab2f1cf..41efa66c094 100644 --- a/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx +++ b/extensions/cornerstone/src/Viewport/Overlays/ViewportLoadingIndicator.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useCallback, useRef } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; import PropTypes from 'prop-types'; import { Enums } from '@cornerstonejs/core'; @@ -9,20 +9,17 @@ function ViewportLoadingIndicator({ viewportData, element }) { const loadIndicatorRef = useRef(null); const imageIdToBeLoaded = useRef(null); - const setLoadingStateScroll = useCallback( - evt => { - imageIdToBeLoaded.current = evt.detail.imageId; - - if (loading) { - return; - } + const setLoadingState = evt => { + clearTimeout(loadIndicatorRef.current); + loadIndicatorRef.current = setTimeout(() => { setLoading(true); - }, - [loading] - ); + }, 50); + }; const setFinishLoadingState = evt => { + clearTimeout(loadIndicatorRef.current); + setLoading(false); }; @@ -38,7 +35,7 @@ function ViewportLoadingIndicator({ viewportData, element }) { useEffect(() => { element.addEventListener( Enums.Events.STACK_VIEWPORT_SCROLL, - setLoadingStateScroll + setLoadingState ); element.addEventListener(Enums.Events.IMAGE_LOAD_ERROR, setErrorState); element.addEventListener( @@ -49,7 +46,7 @@ function ViewportLoadingIndicator({ viewportData, element }) { return () => { element.removeEventListener( Enums.Events.STACK_VIEWPORT_SCROLL, - setLoadingStateScroll + setLoadingState ); element.removeEventListener(