diff --git a/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx b/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx
index d150c44e0cf..6fcca0b045a 100644
--- a/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx
+++ b/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx
@@ -89,280 +89,297 @@ function areEqual(prevProps, nextProps) {
}
}
}
-
return true;
}
// Todo: This should be done with expose of internal API similar to react-vtkjs-viewport
// Then we don't need to worry about the re-renders if the props change.
-const OHIFCornerstoneViewport = React.memo(props => {
- const {
- viewportIndex,
- displaySets,
- dataSource,
- viewportOptions,
- displaySetOptions,
- servicesManager,
- onElementEnabled,
- onElementDisabled,
- // Note: you SHOULD NOT use the initialImageIdOrIndex for manipulation
- // of the imageData in the OHIFCornerstoneViewport. This prop is used
- // to set the initial state of the viewport's first image to render
- initialImageIndex,
- } = props;
-
- const [scrollbarHeight, setScrollbarHeight] = useState('100px');
-
- const elementRef = useRef();
-
- const {
- measurementService,
- displaySetService,
- toolbarService,
- toolGroupService,
- syncGroupService,
- cornerstoneViewportService,
- cornerstoneCacheService,
- viewportGridService,
- } = servicesManager.services;
-
- // useCallback for scroll bar height calculation
- const setImageScrollBarHeight = useCallback(() => {
- const scrollbarHeight = `${elementRef.current.clientHeight - 20}px`;
- setScrollbarHeight(scrollbarHeight);
- }, [elementRef]);
-
- // useCallback for onResize
- const onResize = useCallback(() => {
- if (elementRef.current) {
- cornerstoneViewportService.resize();
- setImageScrollBarHeight();
- }
- }, [elementRef]);
-
- const cleanUpServices = useCallback(() => {
- const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
- viewportIndex
- );
-
- if (!viewportInfo) {
- return;
- }
-
- const viewportId = viewportInfo.getViewportId();
- const renderingEngineId = viewportInfo.getRenderingEngineId();
- const syncGroups = viewportInfo.getSyncGroups();
-
- toolGroupService.removeViewportFromToolGroup(viewportId, renderingEngineId);
-
- syncGroupService.removeViewportFromSyncGroup(
- viewportId,
- renderingEngineId,
- syncGroups
- );
- }, [viewportIndex, viewportOptions.viewportId]);
-
- const elementEnabledHandler = useCallback(
- evt => {
- // check this is this element reference and return early if doesn't match
- if (evt.detail.element !== elementRef.current) {
- return;
+const OHIFCornerstoneViewport = React.memo(
+ React.forwardRef((props, ref) => {
+ const {
+ viewportIndex,
+ displaySets,
+ dataSource,
+ viewportOptions,
+ displaySetOptions,
+ servicesManager,
+ onElementEnabled,
+ onElementDisabled,
+ // Note: you SHOULD NOT use the initialImageIdOrIndex for manipulation
+ // of the imageData in the OHIFCornerstoneViewport. This prop is used
+ // to set the initial state of the viewport's first image to render
+ initialImageIndex,
+ disableViewportImageScrollbar,
+ disableViewportOverlay,
+ disableViewportImageSliceLoadingIndicator,
+ disableViewportOrientationMarkers,
+ } = props;
+
+ const [scrollbarHeight, setScrollbarHeight] = useState('100px');
+
+ const elementRef = useRef();
+
+ React.useImperativeHandle(ref, () => elementRef.current);
+
+ const {
+ measurementService,
+ displaySetService,
+ toolbarService,
+ toolGroupService,
+ syncGroupService,
+ cornerstoneViewportService,
+ cornerstoneCacheService,
+ viewportGridService,
+ } = servicesManager.services;
+
+ // useCallback for scroll bar height calculation
+ const setImageScrollBarHeight = useCallback(() => {
+ const scrollbarHeight = `${elementRef.current.clientHeight - 20}px`;
+ setScrollbarHeight(scrollbarHeight);
+ }, [elementRef]);
+
+ // useCallback for onResize
+ const onResize = useCallback(() => {
+ if (elementRef.current) {
+ cornerstoneViewportService.resize();
+ setImageScrollBarHeight();
}
+ }, [elementRef]);
- const { viewportId, element } = evt.detail;
- const viewportInfo = cornerstoneViewportService.getViewportInfo(
- viewportId
+ const cleanUpServices = useCallback(() => {
+ const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
+ viewportIndex
);
- const viewportIndex = viewportInfo.getViewportIndex();
- setEnabledElement(viewportIndex, element);
+ if (!viewportInfo) {
+ return;
+ }
+ const viewportId = viewportInfo.getViewportId();
const renderingEngineId = viewportInfo.getRenderingEngineId();
- const toolGroupId = viewportInfo.getToolGroupId();
const syncGroups = viewportInfo.getSyncGroups();
- toolGroupService.addViewportToToolGroup(
+ toolGroupService.removeViewportFromToolGroup(
viewportId,
- renderingEngineId,
- toolGroupId
+ renderingEngineId
);
- syncGroupService.addViewportToSyncGroup(
+ syncGroupService.removeViewportFromSyncGroup(
viewportId,
renderingEngineId,
syncGroups
);
+ }, [viewportIndex, viewportOptions.viewportId]);
- if (onElementEnabled) {
- onElementEnabled(evt);
- }
- },
- [viewportIndex, onElementEnabled, toolGroupService]
- );
-
- // disable the element upon unmounting
- useEffect(() => {
- cornerstoneViewportService.enableViewport(
- viewportIndex,
- viewportOptions,
- elementRef.current
- );
+ const elementEnabledHandler = useCallback(
+ evt => {
+ // check this is this element reference and return early if doesn't match
+ if (evt.detail.element !== elementRef.current) {
+ return;
+ }
- eventTarget.addEventListener(
- Enums.Events.ELEMENT_ENABLED,
- elementEnabledHandler
- );
+ const { viewportId, element } = evt.detail;
+ const viewportInfo = cornerstoneViewportService.getViewportInfo(
+ viewportId
+ );
+ const viewportIndex = viewportInfo.getViewportIndex();
- setImageScrollBarHeight();
+ setEnabledElement(viewportIndex, element);
- return () => {
- cleanUpServices();
+ const renderingEngineId = viewportInfo.getRenderingEngineId();
+ const toolGroupId = viewportInfo.getToolGroupId();
+ const syncGroups = viewportInfo.getSyncGroups();
- cornerstoneViewportService.disableElement(viewportIndex);
+ toolGroupService.addViewportToToolGroup(
+ viewportId,
+ renderingEngineId,
+ toolGroupId
+ );
- if (onElementDisabled) {
- const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
- viewportIndex
+ syncGroupService.addViewportToSyncGroup(
+ viewportId,
+ renderingEngineId,
+ syncGroups
);
- onElementDisabled(viewportInfo);
- }
+ if (onElementEnabled) {
+ onElementEnabled(evt);
+ }
+ },
+ [viewportIndex, onElementEnabled, toolGroupService]
+ );
+
+ // disable the element upon unmounting
+ useEffect(() => {
+ cornerstoneViewportService.enableViewport(
+ viewportIndex,
+ viewportOptions,
+ elementRef.current
+ );
- eventTarget.removeEventListener(
+ eventTarget.addEventListener(
Enums.Events.ELEMENT_ENABLED,
elementEnabledHandler
);
- };
- }, []);
-
- // subscribe to displaySet metadata invalidation (updates)
- // Currently, if the metadata changes we need to re-render the display set
- // for it to take effect in the viewport. As we deal with scaling in the loading,
- // we need to remove the old volume from the cache, and let the
- // viewport to re-add it which will use the new metadata. Otherwise, the
- // viewport will use the cached volume and the new metadata will not be used.
- // Note: this approach does not actually end of sending network requests
- // and it uses the network cache
- useEffect(() => {
- const { unsubscribe } = displaySetService.subscribe(
- displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED,
- async invalidatedDisplaySetInstanceUID => {
- const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
- viewportIndex
- );
- if (viewportInfo.hasDisplaySet(invalidatedDisplaySetInstanceUID)) {
- const viewportData = viewportInfo.getViewportData();
- const newViewportData = await cornerstoneCacheService.invalidateViewportData(
- viewportData,
- invalidatedDisplaySetInstanceUID,
- dataSource,
- displaySetService
+ setImageScrollBarHeight();
+
+ return () => {
+ cleanUpServices();
+
+ cornerstoneViewportService.disableElement(viewportIndex);
+
+ if (onElementDisabled) {
+ const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
+ viewportIndex
);
- const keepCamera = true;
- cornerstoneViewportService.updateViewport(
- viewportIndex,
- newViewportData,
- keepCamera
+ onElementDisabled(viewportInfo);
+ }
+
+ eventTarget.removeEventListener(
+ Enums.Events.ELEMENT_ENABLED,
+ elementEnabledHandler
+ );
+ };
+ }, []);
+
+ // subscribe to displaySet metadata invalidation (updates)
+ // Currently, if the metadata changes we need to re-render the display set
+ // for it to take effect in the viewport. As we deal with scaling in the loading,
+ // we need to remove the old volume from the cache, and let the
+ // viewport to re-add it which will use the new metadata. Otherwise, the
+ // viewport will use the cached volume and the new metadata will not be used.
+ // Note: this approach does not actually end of sending network requests
+ // and it uses the network cache
+ useEffect(() => {
+ const { unsubscribe } = displaySetService.subscribe(
+ displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED,
+ async invalidatedDisplaySetInstanceUID => {
+ const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
+ viewportIndex
);
+
+ if (viewportInfo.hasDisplaySet(invalidatedDisplaySetInstanceUID)) {
+ const viewportData = viewportInfo.getViewportData();
+ const newViewportData = await cornerstoneCacheService.invalidateViewportData(
+ viewportData,
+ invalidatedDisplaySetInstanceUID,
+ dataSource,
+ displaySetService
+ );
+
+ const keepCamera = true;
+ cornerstoneViewportService.updateViewport(
+ viewportIndex,
+ newViewportData,
+ keepCamera
+ );
+ }
}
+ );
+ return () => {
+ unsubscribe();
+ };
+ }, [viewportIndex]);
+
+ useEffect(() => {
+ // handle the default viewportType to be stack
+ if (!viewportOptions.viewportType) {
+ viewportOptions.viewportType = STACK;
}
- );
- return () => {
- unsubscribe();
- };
- }, [viewportIndex]);
-
- useEffect(() => {
- // handle the default viewportType to be stack
- if (!viewportOptions.viewportType) {
- viewportOptions.viewportType = STACK;
- }
- const loadViewportData = async () => {
- const viewportData = await cornerstoneCacheService.createViewportData(
+ const loadViewportData = async () => {
+ const viewportData = await cornerstoneCacheService.createViewportData(
+ displaySets,
+ viewportOptions,
+ dataSource,
+ initialImageIndex
+ );
+
+ cornerstoneViewportService.setViewportData(
+ viewportIndex,
+ viewportData,
+ viewportOptions,
+ displaySetOptions
+ );
+ };
+
+ loadViewportData();
+ }, [viewportOptions, displaySets, dataSource]);
+
+ /**
+ * There are two scenarios for jump to click
+ * 1. Current viewports contain the displaySet that the annotation was drawn on
+ * 2. Current viewports don't contain the displaySet that the annotation was drawn on
+ * and we need to change the viewports displaySet for jumping.
+ * Since measurement_jump happens via events and listeners, the former case is handled
+ * by the measurement_jump direct callback, but the latter case is handled first by
+ * the viewportGrid to set the correct displaySet on the viewport, AND THEN we check
+ * the cache for jumping to see if there is any jump queued, then we jump to the correct slice.
+ */
+ useEffect(() => {
+ const unsubscribeFromJumpToMeasurementEvents = _subscribeToJumpToMeasurementEvents(
+ measurementService,
+ displaySetService,
+ elementRef,
+ viewportIndex,
displaySets,
- viewportOptions,
- dataSource,
- initialImageIndex
+ viewportGridService,
+ cornerstoneViewportService
);
- cornerstoneViewportService.setViewportData(
+ _checkForCachedJumpToMeasurementEvents(
+ measurementService,
+ displaySetService,
+ elementRef,
viewportIndex,
- viewportData,
- viewportOptions,
- displaySetOptions
+ displaySets,
+ viewportGridService,
+ cornerstoneViewportService
);
- };
-
- loadViewportData();
- }, [viewportOptions, displaySets, dataSource]);
-
- /**
- * There are two scenarios for jump to click
- * 1. Current viewports contain the displaySet that the annotation was drawn on
- * 2. Current viewports don't contain the displaySet that the annotation was drawn on
- * and we need to change the viewports displaySet for jumping.
- * Since measurement_jump happens via events and listeners, the former case is handled
- * by the measurement_jump direct callback, but the latter case is handled first by
- * the viewportGrid to set the correct displaySet on the viewport, AND THEN we check
- * the cache for jumping to see if there is any jump queued, then we jump to the correct slice.
- */
- useEffect(() => {
- const unsubscribeFromJumpToMeasurementEvents = _subscribeToJumpToMeasurementEvents(
- measurementService,
- displaySetService,
- elementRef,
- viewportIndex,
- displaySets,
- viewportGridService,
- cornerstoneViewportService
- );
- _checkForCachedJumpToMeasurementEvents(
- measurementService,
- displaySetService,
- elementRef,
- viewportIndex,
- displaySets,
- viewportGridService,
- cornerstoneViewportService
+ return () => {
+ unsubscribeFromJumpToMeasurementEvents();
+ };
+ }, [displaySets, elementRef, viewportIndex]);
+
+ return (
+
;\n}\n\nViewportOrientationMarkers.propTypes = {\n percentComplete: PropTypes.number,\n error: PropTypes.object,\n};\n\nViewportOrientationMarkers.defaultProps = {\n percentComplete: 0,\n error: null,\n};\n\n/**\n *\n * Computes the orientation labels on a Cornerstone-enabled Viewport element\n * when the viewport settings change (e.g. when a horizontal flip or a rotation occurs)\n *\n * @param {*} rowCosines\n * @param {*} columnCosines\n * @param {*} rotation in degrees\n * @returns\n */\nfunction _getOrientationMarkers(\n rowCosines,\n columnCosines,\n rotation,\n flipVertical,\n flipHorizontal\n) {\n const rowString = getOrientationStringLPS(rowCosines);\n const columnString = getOrientationStringLPS(columnCosines);\n const oppositeRowString = invertOrientationStringLPS(rowString);\n const oppositeColumnString = invertOrientationStringLPS(columnString);\n\n const markers = {\n top: oppositeColumnString,\n left: oppositeRowString,\n right: rowString,\n bottom: columnString,\n };\n\n // If any vertical or horizontal flips are applied, change the orientation strings ahead of\n // the rotation applications\n if (flipVertical) {\n markers.top = invertOrientationStringLPS(markers.top);\n markers.bottom = invertOrientationStringLPS(markers.bottom);\n }\n\n if (flipHorizontal) {\n markers.left = invertOrientationStringLPS(markers.left);\n markers.right = invertOrientationStringLPS(markers.right);\n }\n\n // Swap the labels accordingly if the viewport has been rotated\n // This could be done in a more complex way for intermediate rotation values (e.g. 45 degrees)\n if (rotation === 90 || rotation === -270) {\n return {\n top: markers.left,\n left: invertOrientationStringLPS(markers.top),\n right: invertOrientationStringLPS(markers.bottom),\n bottom: markers.right, // left\n };\n } else if (rotation === -90 || rotation === 270) {\n return {\n top: invertOrientationStringLPS(markers.left),\n left: markers.top,\n bottom: markers.left,\n right: markers.bottom,\n };\n } else if (rotation === 180 || rotation === -180) {\n return {\n top: invertOrientationStringLPS(markers.top),\n left: invertOrientationStringLPS(markers.left),\n bottom: invertOrientationStringLPS(markers.bottom),\n right: invertOrientationStringLPS(markers.right),\n };\n }\n\n return markers;\n}\n\nexport default ViewportOrientationMarkers;\n","import React, { useEffect, useState, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { Enums } from '@cornerstonejs/core';\n\nfunction ViewportImageSliceLoadingIndicator({ viewportData, element }) {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(false);\n\n const loadIndicatorRef = useRef(null);\n const imageIdToBeLoaded = useRef(null);\n\n const setLoadingState = evt => {\n clearTimeout(loadIndicatorRef.current);\n\n loadIndicatorRef.current = setTimeout(() => {\n setLoading(true);\n }, 50);\n };\n\n const setFinishLoadingState = evt => {\n clearTimeout(loadIndicatorRef.current);\n\n setLoading(false);\n };\n\n const setErrorState = evt => {\n clearTimeout(loadIndicatorRef.current);\n\n if (imageIdToBeLoaded.current === evt.detail.imageId) {\n setError(evt.detail.error);\n imageIdToBeLoaded.current = null;\n }\n };\n\n useEffect(() => {\n element.addEventListener(\n Enums.Events.STACK_VIEWPORT_SCROLL,\n setLoadingState\n );\n element.addEventListener(Enums.Events.IMAGE_LOAD_ERROR, setErrorState);\n element.addEventListener(\n Enums.Events.STACK_NEW_IMAGE,\n setFinishLoadingState\n );\n\n return () => {\n element.removeEventListener(\n Enums.Events.STACK_VIEWPORT_SCROLL,\n setLoadingState\n );\n\n element.removeEventListener(\n Enums.Events.STACK_NEW_IMAGE,\n setFinishLoadingState\n );\n\n element.removeEventListener(Enums.Events.IMAGE_LOAD_ERROR, setErrorState);\n };\n }, [element, viewportData]);\n\n if (error) {\n return (\n <>\n
\n
\n
\n
Error Loading Image
\n
An error has occurred.
\n
{error}
\n \n
\n
\n \n );\n }\n\n if (loading) {\n return (\n // IMPORTANT: we need to use the pointer-events-none class to prevent the loading indicator from\n // interacting with the mouse, since scrolling should propagate to the viewport underneath\n
\n );\n}\n\nexport default CornerstoneOverlays;\n","import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport ReactResizeDetector from 'react-resize-detector';\nimport PropTypes from 'prop-types';\nimport * as cs3DTools from '@cornerstonejs/tools';\nimport {\n Enums,\n eventTarget,\n getEnabledElement,\n StackViewport,\n utilities as csUtils,\n CONSTANTS,\n} from '@cornerstonejs/core';\n\nimport { setEnabledElement } from '../state';\n\nimport './OHIFCornerstoneViewport.css';\nimport CornerstoneOverlays from './Overlays/CornerstoneOverlays';\nimport {\n IStackViewport,\n IVolumeViewport,\n} from '@cornerstonejs/core/dist/esm/types';\nimport getSOPInstanceAttributes from '../utils/measurementServiceMappings/utils/getSOPInstanceAttributes';\n\nconst STACK = 'stack';\n\nfunction areEqual(prevProps, nextProps) {\n if (nextProps.needsRerendering) {\n return false;\n }\n\n if (prevProps.displaySets.length !== nextProps.displaySets.length) {\n return false;\n }\n\n if (\n prevProps.viewportOptions.orientation !==\n nextProps.viewportOptions.orientation\n ) {\n return false;\n }\n\n if (\n prevProps.viewportOptions.viewportType !==\n nextProps.viewportOptions.viewportType\n ) {\n return false;\n }\n\n const prevDisplaySets = prevProps.displaySets;\n const nextDisplaySets = nextProps.displaySets;\n\n if (prevDisplaySets.length !== nextDisplaySets.length) {\n return false;\n }\n\n for (let i = 0; i < prevDisplaySets.length; i++) {\n const prevDisplaySet = prevDisplaySets[i];\n\n const foundDisplaySet = nextDisplaySets.find(\n nextDisplaySet =>\n nextDisplaySet.displaySetInstanceUID ===\n prevDisplaySet.displaySetInstanceUID\n );\n\n if (!foundDisplaySet) {\n return false;\n }\n\n // check they contain the same image\n if (foundDisplaySet.images?.length !== prevDisplaySet.images?.length) {\n return false;\n }\n\n // check if their imageIds are the same\n if (foundDisplaySet.images?.length) {\n for (let j = 0; j < foundDisplaySet.images.length; j++) {\n if (\n foundDisplaySet.images[j].imageId !== prevDisplaySet.images[j].imageId\n ) {\n return false;\n }\n }\n }\n }\n\n return true;\n}\n\n// Todo: This should be done with expose of internal API similar to react-vtkjs-viewport\n// Then we don't need to worry about the re-renders if the props change.\nconst OHIFCornerstoneViewport = React.memo(React.forwardRef((props, ref) => {\n const {\n viewportIndex,\n displaySets,\n dataSource,\n viewportOptions,\n displaySetOptions,\n servicesManager,\n onElementEnabled,\n onElementDisabled,\n // Note: you SHOULD NOT use the initialImageIdOrIndex for manipulation\n // of the imageData in the OHIFCornerstoneViewport. This prop is used\n // to set the initial state of the viewport's first image to render\n initialImageIndex,\n disableViewportImageScrollbar,\n disableViewportOverlay,\n disableViewportImageSliceLoadingIndicator,\n disableViewportOrientationMarkers,\n } = props;\n\n const [scrollbarHeight, setScrollbarHeight] = useState('100px');\n\n const elementRef = useRef();\n\n React.useImperativeHandle(ref, () => elementRef.current);\n\n const {\n MeasurementService,\n DisplaySetService,\n ToolBarService,\n ToolGroupService,\n SyncGroupService,\n CornerstoneViewportService,\n CornerstoneCacheService,\n ViewportGridService,\n } = servicesManager.services;\n\n // useCallback for scroll bar height calculation\n const setImageScrollBarHeight = useCallback(() => {\n const scrollbarHeight = `${elementRef.current.clientHeight - 20}px`;\n setScrollbarHeight(scrollbarHeight);\n }, [elementRef]);\n\n // useCallback for onResize\n const onResize = useCallback(() => {\n if (elementRef.current) {\n CornerstoneViewportService.resize();\n setImageScrollBarHeight();\n }\n }, [elementRef]);\n\n const elementEnabledHandler = useCallback(\n evt => {\n // check this is this element reference and return early if doesn't match\n if (evt.detail.element !== elementRef.current) {\n return;\n }\n\n const { viewportId, element } = evt.detail;\n const viewportInfo = CornerstoneViewportService.getViewportInfo(\n viewportId\n );\n const viewportIndex = viewportInfo.getViewportIndex();\n\n setEnabledElement(viewportIndex, element);\n\n const renderingEngineId = viewportInfo.getRenderingEngineId();\n const toolGroupId = viewportInfo.getToolGroupId();\n const syncGroups = viewportInfo.getSyncGroups();\n\n ToolGroupService.addViewportToToolGroup(\n viewportId,\n renderingEngineId,\n toolGroupId\n );\n\n SyncGroupService.addViewportToSyncGroup(\n viewportId,\n renderingEngineId,\n syncGroups\n );\n\n if (onElementEnabled) {\n onElementEnabled(evt);\n }\n },\n [viewportIndex, onElementEnabled, ToolGroupService]\n );\n\n // disable the element upon unmounting\n useEffect(() => {\n CornerstoneViewportService.enableViewport(\n viewportIndex,\n viewportOptions,\n elementRef.current\n );\n\n eventTarget.addEventListener(\n Enums.Events.ELEMENT_ENABLED,\n elementEnabledHandler\n );\n\n setImageScrollBarHeight();\n\n return () => {\n const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex(\n viewportIndex\n );\n\n const viewportId = viewportInfo.getViewportId();\n const renderingEngineId = viewportInfo.getRenderingEngineId();\n const syncGroups = viewportInfo.getSyncGroups();\n\n ToolGroupService.removeViewportFromToolGroup(\n viewportId,\n renderingEngineId\n );\n\n SyncGroupService.removeViewportFromSyncGroup(\n viewportId,\n renderingEngineId,\n syncGroups\n );\n\n CornerstoneViewportService.disableElement(viewportIndex);\n\n if (onElementDisabled) {\n onElementDisabled(viewportInfo);\n }\n\n eventTarget.removeEventListener(\n Enums.Events.ELEMENT_ENABLED,\n elementEnabledHandler\n );\n };\n }, []);\n\n // subscribe to displaySet metadata invalidation (updates)\n // Currently, if the metadata changes we need to re-render the display set\n // for it to take effect in the viewport. As we deal with scaling in the loading,\n // we need to remove the old volume from the cache, and let the\n // viewport to re-add it which will use the new metadata. Otherwise, the\n // viewport will use the cached volume and the new metadata will not be used.\n // Note: this approach does not actually end of sending network requests\n // and it uses the network cache\n useEffect(() => {\n const { unsubscribe } = DisplaySetService.subscribe(\n DisplaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED,\n async invalidatedDisplaySetInstanceUID => {\n const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex(\n viewportIndex\n );\n\n if (viewportInfo.hasDisplaySet(invalidatedDisplaySetInstanceUID)) {\n const viewportData = viewportInfo.getViewportData();\n const newViewportData = await CornerstoneCacheService.invalidateViewportData(\n viewportData,\n invalidatedDisplaySetInstanceUID,\n dataSource,\n DisplaySetService\n );\n\n const keepCamera = true;\n CornerstoneViewportService.updateViewport(\n viewportIndex,\n newViewportData,\n keepCamera\n );\n }\n }\n );\n return () => {\n unsubscribe();\n };\n }, [viewportIndex]);\n\n useEffect(() => {\n // handle the default viewportType to be stack\n if (!viewportOptions.viewportType) {\n viewportOptions.viewportType = STACK;\n }\n\n const loadViewportData = async () => {\n const viewportData = await CornerstoneCacheService.createViewportData(\n displaySets,\n viewportOptions,\n dataSource,\n initialImageIndex\n );\n\n CornerstoneViewportService.setViewportData(\n viewportIndex,\n viewportData,\n viewportOptions,\n displaySetOptions\n );\n };\n\n loadViewportData();\n }, [viewportOptions, displaySets, dataSource]);\n\n /**\n * There are two scenarios for jump to click\n * 1. Current viewports contain the displaySet that the annotation was drawn on\n * 2. Current viewports don't contain the displaySet that the annotation was drawn on\n * and we need to change the viewports displaySet for jumping.\n * Since measurement_jump happens via events and listeners, the former case is handled\n * by the measurement_jump direct callback, but the latter case is handled first by\n * the viewportGrid to set the correct displaySet on the viewport, AND THEN we check\n * the cache for jumping to see if there is any jump queued, then we jump to the correct slice.\n */\n useEffect(() => {\n const unsubscribeFromJumpToMeasurementEvents = _subscribeToJumpToMeasurementEvents(\n MeasurementService,\n DisplaySetService,\n elementRef,\n viewportIndex,\n displaySets,\n ViewportGridService,\n CornerstoneViewportService\n );\n\n _checkForCachedJumpToMeasurementEvents(\n MeasurementService,\n DisplaySetService,\n elementRef,\n viewportIndex,\n displaySets,\n ViewportGridService,\n CornerstoneViewportService\n );\n\n return () => {\n unsubscribeFromJumpToMeasurementEvents();\n };\n }, [displaySets, elementRef, viewportIndex]);\n\n return (\n