@ohif/app 3.8.0-beta.73 → 3.8.0-beta.75

package/dist/{530.bundle.f4b7966fb33eafb8cd5d.js → 530.bundle.7c94543955552475c56a.js}

@@ -12,9 +12,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(41766);
 /* harmony import */ var react_i18next__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(80619);
-/* harmony import */ var _ohif_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(85073);
+/* harmony import */ var _ohif_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(55411);
 /* harmony import */ var _tools_modules_dicomSRModule__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(74334);
-/* harmony import */ var _ohif_ui__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(48804);
+/* harmony import */ var _ohif_ui__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5085);
 /* harmony import */ var _utils_hydrateStructuredReport__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(77089);
 /* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(15575);
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -332,13 +332,13 @@ OHIFCornerstoneSRViewport.defaultProps = {
   customProps: {}
 };
 async function _getViewportReferencedDisplaySetData(displaySet, measurementSelected, displaySetService) {
-  const {
-    measurements
-  } = displaySet;
-  const measurement = measurements[measurementSelected];
-  const {
-    displaySetInstanceUID
-  } = measurement;
+  if (!displaySet.keyImageDisplaySet) {
+    // Create a new display set, and preserve a reference to it here,
+    // so that it can be re-displayed and shown inside the SR viewport.
+    // This is only for ease of redisplay - the display set is stored in the
+    // usual manner in the display set service.
+    displaySet.keyImageDisplaySet = createReferencedImageDisplaySet(displaySetService, displaySet);
+  }
   const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
   const image0 = referencedDisplaySet.images[0];
   const referencedDisplaySetMetadata = {

package/dist/{540.bundle.32224b29bfa11d1f1cec.js → 540.bundle.45a7a300cc09906b4acc.js}

@@ -25,14 +25,14 @@ const id = package_namespaceObject.UU;
 const SOPClassHandlerName = 'dicom-sr';
 const SOPClassHandlerId = `${id}.sopClassHandlerModule.${SOPClassHandlerName}`;
 
-// EXTERNAL MODULE: ../../core/src/index.ts + 68 modules
-var src = __webpack_require__(85073);
-// EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 10 modules
-var esm = __webpack_require__(83636);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 16 modules
-var dist_esm = __webpack_require__(20767);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 383 modules
-var core_dist_esm = __webpack_require__(50719);
+// EXTERNAL MODULE: ../../core/src/index.ts + 70 modules
+var src = __webpack_require__(55411);
+// EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 1 modules
+var esm = __webpack_require__(44753);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 18 modules
+var dist_esm = __webpack_require__(24542);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 327 modules
+var core_dist_esm = __webpack_require__(44656);
 // EXTERNAL MODULE: ../../../extensions/cornerstone-dicom-sr/src/tools/modules/dicomSRModule.js
 var dicomSRModule = __webpack_require__(74334);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-sr/src/constants/scoordTypes.js
@@ -1571,7 +1571,7 @@ const dicomSRExtension = {
 /* harmony export */   m1: () => (/* binding */ setTrackingUniqueIdentifiersForElement)
 /* harmony export */ });
 /* unused harmony export setActiveTrackingUniqueIdentifierForElement */
-/* harmony import */ var _cornerstonejs_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(50719);
+/* harmony import */ var _cornerstonejs_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(44656);
 
 const state = {
   TrackingUniqueIdentifier: null,
@@ -1632,10 +1632,10 @@ __webpack_require__.d(__webpack_exports__, {
   A: () => (/* binding */ hydrateStructuredReport)
 });
 
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 383 modules
-var esm = __webpack_require__(50719);
-// EXTERNAL MODULE: ../../core/src/index.ts + 68 modules
-var src = __webpack_require__(85073);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 327 modules
+var esm = __webpack_require__(44656);
+// EXTERNAL MODULE: ../../core/src/index.ts + 70 modules
+var src = __webpack_require__(55411);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-sr/src/utils/getLabelFromDCMJSImportedToolData.js
 /**
  * Extracts the label from the toolData imported from dcmjs. We need to do this
@@ -1660,8 +1660,8 @@ function getLabelFromDCMJSImportedToolData(toolData) {
 }
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/adapters/dist/adapters.es.js
 var adapters_es = __webpack_require__(83342);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 16 modules
-var dist_esm = __webpack_require__(20767);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 18 modules
+var dist_esm = __webpack_require__(24542);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-sr/src/utils/hydrateStructuredReport.js
 
 

package/dist/{544.bundle.1110b24e96863d719a95.js → 544.bundle.1c1f57118560046649c1.js}

@@ -22,8 +22,8 @@ var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 // EXTERNAL MODULE: ../../../node_modules/lodash.debounce/index.js
 var lodash_debounce = __webpack_require__(14771);
 var lodash_debounce_default = /*#__PURE__*/__webpack_require__.n(lodash_debounce);
-// EXTERNAL MODULE: ../../ui/src/index.js + 542 modules
-var src = __webpack_require__(48804);
+// EXTERNAL MODULE: ../../ui/src/index.js + 785 modules
+var src = __webpack_require__(5085);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/DicomMicroscopyViewport.css
 // extracted by mini-css-extract-plugin
 
@@ -59,8 +59,8 @@ const listComponentGenerator = props => {
 
 // EXTERNAL MODULE: ../../../node_modules/moment/moment.js
 var moment_moment = __webpack_require__(8291);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 383 modules
-var esm = __webpack_require__(50719);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 327 modules
+var esm = __webpack_require__(44656);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/components/ViewportOverlay/utils.ts
 
 
@@ -256,19 +256,13 @@ const itemGenerator = props => {
   }, content.value)));
 };
 /* harmony default export */ const ViewportOverlay = (generateFromConfig({}));
-// EXTERNAL MODULE: ../../../node_modules/dicomweb-client/build/dicomweb-client.es.js
-var dicomweb_client_es = __webpack_require__(36922);
-// EXTERNAL MODULE: ../../core/src/index.ts + 68 modules
-var core_src = __webpack_require__(85073);
+// EXTERNAL MODULE: ../../core/src/index.ts + 70 modules
+var core_src = __webpack_require__(55411);
+// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 85 modules
+var default_src = __webpack_require__(7206);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/utils/dicomWebClient.ts
 
 
-const {
-  DICOMwebClient
-} = dicomweb_client_es/* api */.FH;
-DICOMwebClient._buildMultipartAcceptHeaderFieldValue = () => {
-  return '*/*';
-};
 
 /**
  * create a DICOMwebClient object to be used by Dicom Microscopy Viewer
@@ -298,7 +292,7 @@ function getDicomWebClient({
     headers: userAuthenticationService.getAuthorizationHeader(),
     errorInterceptor: core_src/* errorHandler */.r_.getHTTPErrorHandler()
   };
-  const client = new dicomweb_client_es/* api */.FH.DICOMwebClient(wadoConfig);
+  const client = new default_src.StaticWadoClient(wadoConfig);
   client.wadoURL = wadoConfig.url;
   if (extensionManager.activeDataSource === 'dicomlocal') {
     /**
@@ -339,8 +333,6 @@ function getDicomWebClient({
 }
 // EXTERNAL MODULE: ../../../node_modules/dcmjs/build/dcmjs.es.js
 var dcmjs_es = __webpack_require__(31426);
-// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 78 modules
-var default_src = __webpack_require__(54090);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/utils/cleanDenaturalizedDataset.ts
 
 function isPrimitive(v) {

package/dist/{574.bundle.2b3369042aad5d553463.js → 574.bundle.b4eb8773d7741868e84b.js}

@@ -19,14 +19,14 @@ var index_esm = __webpack_require__(78668);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
 var prop_types = __webpack_require__(11374);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 16 modules
-var esm = __webpack_require__(20767);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 383 modules
-var dist_esm = __webpack_require__(50719);
-// EXTERNAL MODULE: ../../core/src/index.ts + 68 modules
-var src = __webpack_require__(85073);
-// EXTERNAL MODULE: ../../ui/src/index.js + 542 modules
-var ui_src = __webpack_require__(48804);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 18 modules
+var esm = __webpack_require__(24542);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 327 modules
+var dist_esm = __webpack_require__(44656);
+// EXTERNAL MODULE: ../../core/src/index.ts + 70 modules
+var src = __webpack_require__(55411);
+// EXTERNAL MODULE: ../../ui/src/index.js + 785 modules
+var ui_src = __webpack_require__(5085);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/state.ts
 var state = __webpack_require__(71353);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.css
@@ -156,8 +156,8 @@ CornerstoneImageScrollbar.propTypes = {
   servicesManager: (prop_types_default()).object.isRequired
 };
 /* harmony default export */ const ViewportImageScrollbar = (CornerstoneImageScrollbar);
-// EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 10 modules
-var gl_matrix_esm = __webpack_require__(83636);
+// EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 1 modules
+var gl_matrix_esm = __webpack_require__(44753);
 // EXTERNAL MODULE: ../../../node_modules/moment/moment.js
 var moment = __webpack_require__(8291);
 var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
@@ -482,7 +482,7 @@ function _getViewportInstances(viewportData) {
   } else if (viewportData.viewportType === dist_esm.Enums.ViewportType.ORTHOGRAPHIC) {
     const volumes = viewportData.data;
     volumes.forEach(volume => {
-      if (!volume?.imageIds) {
+      if (!volume?.imageIds || volume.imageIds.length === 0) {
         return;
       }
       imageIds.push(volume.imageIds[0]);
@@ -966,6 +966,8 @@ function CornerstoneOverlays(props) {
 /* harmony default export */ const Overlays_CornerstoneOverlays = (CornerstoneOverlays);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/getSOPInstanceAttributes.js
 var getSOPInstanceAttributes = __webpack_require__(1663);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/streaming-image-volume-loader/dist/esm/index.js + 13 modules
+var streaming_image_volume_loader_dist_esm = __webpack_require__(23722);
 // EXTERNAL MODULE: ./state/index.js + 1 modules
 var state_0 = __webpack_require__(15575);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/CinePlayer/CinePlayer.tsx
@@ -973,6 +975,7 @@ var state_0 = __webpack_require__(15575);
 
 
 
+
 function WrappedCinePlayer({
   enabledVPElement,
   viewportId,
@@ -986,30 +989,28 @@ function WrappedCinePlayer({
   const [{
     isCineEnabled,
     cines
-  }, api] = (0,ui_src/* useCine */.tq)();
+  }, cineService] = (0,ui_src/* useCine */.tq)();
   const [newStackFrameRate, setNewStackFrameRate] = (0,react.useState)(24);
+  const [dynamicInfo, setDynamicInfo] = (0,react.useState)(null);
   const [appConfig] = (0,state_0/* useAppConfig */.r)();
   const isMountedRef = (0,react.useRef)(null);
-  const {
-    component: CinePlayerComponent = ui_src/* CinePlayer */.F0
-  } = customizationService.get('cinePlayer') ?? {};
   const cineHandler = () => {
-    if (!cines || !cines[viewportId] || !enabledVPElement) {
+    if (!cines?.[viewportId] || !enabledVPElement) {
       return;
     }
-    const cine = cines[viewportId];
-    const isPlaying = cine.isPlaying || false;
-    const frameRate = cine.frameRate || 24;
+    const {
+      isPlaying = false,
+      frameRate = 24
+    } = cines[viewportId];
     const validFrameRate = Math.max(frameRate, 1);
-    if (isPlaying) {
-      api.playClip(enabledVPElement, {
-        framesPerSecond: validFrameRate
-      });
-    } else {
-      api.stopClip(enabledVPElement);
-    }
+    return isPlaying ? cineService.playClip(enabledVPElement, {
+      framesPerSecond: validFrameRate
+    }) : cineService.stopClip(enabledVPElement);
   };
-  const newStackCineHandler = (0,react.useCallback)(() => {
+  const newDisplaySetHandler = (0,react.useCallback)(() => {
+    if (!enabledVPElement || !isCineEnabled) {
+      return;
+    }
     const {
       viewports
     } = viewportGridService.getState();
@@ -1017,7 +1018,7 @@ function WrappedCinePlayer({
       displaySetInstanceUIDs
     } = viewports.get(viewportId);
     let frameRate = 24;
-    let isPlaying = cines[viewportId].isPlaying;
+    let isPlaying = cines[viewportId]?.isPlaying || false;
     displaySetInstanceUIDs.forEach(displaySetInstanceUID => {
       const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
       if (displaySet.FrameRate) {
@@ -1026,63 +1027,178 @@ function WrappedCinePlayer({
         frameRate = Math.round(1000 / displaySet.FrameRate);
         isPlaying ||= !!appConfig.autoPlayCine;
       }
+
+      // check if the displaySet is dynamic and set the dynamic info
+      if (displaySet.isDynamicVolume) {
+        const {
+          dynamicVolumeInfo
+        } = displaySet;
+        const numTimePoints = dynamicVolumeInfo.timePoints.length;
+        const label = dynamicVolumeInfo.splittingTag;
+        const timePointIndex = dynamicVolumeInfo.timePointIndex || 0;
+        setDynamicInfo({
+          volumeId: displaySet.displaySetInstanceUID,
+          timePointIndex,
+          numTimePoints,
+          label
+        });
+      } else {
+        setDynamicInfo(null);
+      }
     });
     if (isPlaying) {
-      api.setIsCineEnabled(isPlaying);
+      cineService.setIsCineEnabled(isPlaying);
     }
-    api.setCine({
+    cineService.setCine({
       id: viewportId,
       isPlaying,
       frameRate
     });
     setNewStackFrameRate(frameRate);
-  }, [displaySetService, viewportId, viewportGridService, cines]);
+  }, [displaySetService, viewportId, viewportGridService, cines, isCineEnabled]);
   (0,react.useEffect)(() => {
     isMountedRef.current = true;
-    dist_esm.eventTarget.addEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, newStackCineHandler);
+    newDisplaySetHandler();
     return () => {
       isMountedRef.current = false;
-      api.stopClip(enabledVPElement);
-      api.setCine({
+    };
+  }, [isCineEnabled, newDisplaySetHandler]);
+
+  /**
+   * Use effect for handling new display set
+   */
+  (0,react.useEffect)(() => {
+    if (!enabledVPElement) {
+      return;
+    }
+    dist_esm.eventTarget.addEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, newDisplaySetHandler);
+    // this doesn't makes sense that we are listening to this event on viewport element
+    enabledVPElement.addEventListener(dist_esm.Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME, newDisplaySetHandler);
+    return () => {
+      cineService.setCine({
         id: viewportId,
         isPlaying: false
       });
-      dist_esm.eventTarget.removeEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, newStackCineHandler);
+      dist_esm.eventTarget.removeEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, newDisplaySetHandler);
+      enabledVPElement.removeEventListener(dist_esm.Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME, newDisplaySetHandler);
     };
-  }, [enabledVPElement, newStackCineHandler]);
+  }, [enabledVPElement, newDisplaySetHandler, viewportId]);
   (0,react.useEffect)(() => {
     if (!cines || !cines[viewportId] || !enabledVPElement || !isMountedRef.current) {
       return;
     }
     cineHandler();
     return () => {
-      api.stopClip(enabledVPElement);
+      cineService.stopClip(enabledVPElement);
     };
-  }, [cines, viewportId, enabledVPElement, cineHandler]);
+  }, [cines, viewportId, cineService, enabledVPElement, cineHandler]);
+  if (!isCineEnabled) {
+    return null;
+  }
   const cine = cines[viewportId];
-  const isPlaying = cine && cine.isPlaying || false;
-  return isCineEnabled && /*#__PURE__*/react.createElement(CinePlayerComponent, {
+  const isPlaying = cine?.isPlaying || false;
+  return /*#__PURE__*/react.createElement(RenderCinePlayer, {
+    viewportId: viewportId,
+    cineService: cineService,
+    newStackFrameRate: newStackFrameRate,
+    isPlaying: isPlaying,
+    dynamicInfo: dynamicInfo,
+    customizationService: customizationService
+  });
+}
+function RenderCinePlayer({
+  viewportId,
+  cineService,
+  newStackFrameRate,
+  isPlaying,
+  dynamicInfo: dynamicInfoProp,
+  customizationService
+}) {
+  const {
+    component: CinePlayerComponent = ui_src/* CinePlayer */.F0
+  } = customizationService.get('cinePlayer') ?? {};
+  const [dynamicInfo, setDynamicInfo] = (0,react.useState)(dynamicInfoProp);
+  (0,react.useEffect)(() => {
+    setDynamicInfo(dynamicInfoProp);
+  }, [dynamicInfoProp]);
+
+  /**
+   * Use effect for handling 4D time index changed
+   */
+  (0,react.useEffect)(() => {
+    if (!dynamicInfo) {
+      return;
+    }
+    const handleTimePointIndexChange = evt => {
+      const {
+        volumeId,
+        timePointIndex,
+        numTimePoints,
+        splittingTag
+      } = evt.detail;
+      setDynamicInfo({
+        volumeId,
+        timePointIndex,
+        numTimePoints,
+        label: splittingTag
+      });
+    };
+    dist_esm.eventTarget.addEventListener(streaming_image_volume_loader_dist_esm/* Enums.Events */.fX.s.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED, handleTimePointIndexChange);
+    return () => {
+      dist_esm.eventTarget.removeEventListener(streaming_image_volume_loader_dist_esm/* Enums.Events */.fX.s.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED, handleTimePointIndexChange);
+    };
+  }, [dynamicInfo]);
+  (0,react.useEffect)(() => {
+    if (!dynamicInfo) {
+      return;
+    }
+    const {
+      volumeId,
+      timePointIndex,
+      numTimePoints,
+      splittingTag
+    } = dynamicInfo || {};
+    const volume = dist_esm.cache.getVolume(volumeId);
+    volume.timePointIndex = timePointIndex;
+    setDynamicInfo({
+      volumeId,
+      timePointIndex,
+      numTimePoints,
+      label: splittingTag
+    });
+  }, []);
+  const updateDynamicInfo = (0,react.useCallback)(props => {
+    const {
+      volumeId,
+      timePointIndex
+    } = props;
+    const volume = dist_esm.cache.getVolume(volumeId);
+    volume.timePointIndex = timePointIndex;
+  }, []);
+  return /*#__PURE__*/react.createElement(CinePlayerComponent, {
     className: "absolute left-1/2 bottom-3 -translate-x-1/2",
     frameRate: newStackFrameRate,
     isPlaying: isPlaying,
     onClose: () => {
       // also stop the clip
-      api.setCine({
+      cineService.setCine({
         id: viewportId,
         isPlaying: false
       });
-      api.setIsCineEnabled(false);
+      cineService.setIsCineEnabled(false);
     },
     onPlayPauseChange: isPlaying => {
-      api.setCine({
+      cineService.setCine({
         id: viewportId,
         isPlaying
       });
     },
-    onFrameRateChange: frameRate => api.setCine({
+    onFrameRateChange: frameRate => cineService.setCine({
       id: viewportId,
       frameRate
-    })
+    }),
+    dynamicInfo: dynamicInfo,
+    updateDynamicInfo: updateDynamicInfo
   });
 }
 /* harmony default export */ const CinePlayer = (WrappedCinePlayer);
@@ -2081,6 +2197,11 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     onReady
   } = props;
   const viewportId = viewportOptions.viewportId;
+
+  // Since we only have support for dynamic data in volume viewports, we should
+  // handle this case here and set the viewportType to volume if any of the
+  // displaySets are dynamic volumes
+  viewportOptions.viewportType = displaySets.some(ds => ds.isDynamicVolume) ? 'volume' : viewportOptions.viewportType;
   const [scrollbarHeight, setScrollbarHeight] = (0,react.useState)('100px');
   const [enabledVPElement, setEnabledVPElement] = (0,react.useState)(null);
   const elementRef = (0,react.useRef)();

package/dist/{594.bundle.61a9f0567260e9bb4480.js → 594.bundle.6a804bd412dbf955c5b9.js}

@@ -12,10 +12,10 @@ __webpack_require__.d(__webpack_exports__, {
   "default": () => (/* binding */ basic_dev_mode_src)
 });
 
-// EXTERNAL MODULE: ../../ui/src/index.js + 542 modules
-var src = __webpack_require__(48804);
-// EXTERNAL MODULE: ../../core/src/index.ts + 68 modules
-var core_src = __webpack_require__(85073);
+// EXTERNAL MODULE: ../../ui/src/index.js + 785 modules
+var src = __webpack_require__(5085);
+// EXTERNAL MODULE: ../../core/src/index.ts + 70 modules
+var core_src = __webpack_require__(55411);
 ;// CONCATENATED MODULE: ../../../modes/basic-dev-mode/src/toolbarButtons.js