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

package/dist/{90.bundle.70f4752bb4ac79aef269.js → 83.bundle.ff7db010621303a71a50.js}

@@ -1,7 +1,7 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[90],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[83],{
 
-/***/ 54090:
+/***/ 88083:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -31,8 +31,8 @@ __webpack_require__.d(utils_namespaceObject, {
 
 // 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 src = __webpack_require__(85073);
+// EXTERNAL MODULE: ../../core/src/index.ts + 70 modules
+var src = __webpack_require__(55411);
 // EXTERNAL MODULE: ../../core/src/utils/sortStudy.ts
 var sortStudy = __webpack_require__(45476);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/qido.js
@@ -2484,8 +2484,8 @@ var react = __webpack_require__(41766);
 // 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: ../../ui/src/index.js + 542 modules
-var ui_src = __webpack_require__(48804);
+// EXTERNAL MODULE: ../../ui/src/index.js + 785 modules
+var ui_src = __webpack_require__(5085);
 // EXTERNAL MODULE: ./state/index.js + 1 modules
 var state = __webpack_require__(15575);
 // EXTERNAL MODULE: ../node_modules/react-router-dom/dist/index.js
@@ -2501,14 +2501,15 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 function Toolbar({
-  servicesManager
+  servicesManager,
+  buttonSection = 'primary'
 }) {
   const {
     toolbarButtons,
     onInteraction
   } = (0,src/* useToolbar */.tR)({
     servicesManager,
-    buttonSection: 'primary'
+    buttonSection
   });
   if (!toolbarButtons.length) {
     return null;
@@ -2542,7 +2543,6 @@ function Toolbar({
 
 
 
-
 const {
   availableLanguages,
   defaultLanguage,
@@ -2551,9 +2551,9 @@ const {
 function ViewerHeader({
   hotkeysManager,
   extensionManager,
-  servicesManager
+  servicesManager,
+  appConfig
 }) {
-  const [appConfig] = (0,state/* useAppConfig */.r)();
   const navigate = (0,dist/* useNavigate */.Zp)();
   const location = (0,react_router_dist/* useLocation */.zy)();
   const onClickReturnButton = () => {
@@ -2588,8 +2588,8 @@ function ViewerHeader({
     hotkeyDefinitions,
     hotkeyDefaults
   } = hotkeysManager;
-  const versionNumber = "3.8.0-beta.73";
-  const commitHash = "dc37802ec1f739a6ed602363bdf231d6fe58827e";
+  const versionNumber = "3.8.0-beta.74";
+  const commitHash = "d57e8bc1571c6da4effaa492ee2d162c552365a2";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
@@ -2648,7 +2648,12 @@ function ViewerHeader({
     onClickReturnButton: onClickReturnButton,
     WhiteLabeling: appConfig.whiteLabeling,
     showPatientInfo: appConfig.showPatientInfo,
-    servicesManager: servicesManager
+    servicesManager: servicesManager,
+    Secondary: /*#__PURE__*/react.createElement(Toolbar, {
+      servicesManager: servicesManager,
+      buttonSection: "secondary"
+    }),
+    appConfig: appConfig
   }, /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.tH, {
     context: "Primary Toolbar"
   }, /*#__PURE__*/react.createElement("div", {
@@ -2659,15 +2664,16 @@ function ViewerHeader({
 }
 /* harmony default export */ const ViewerLayout_ViewerHeader = (ViewerHeader);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Components/SidePanelWithServices.tsx
+function SidePanelWithServices_extends() { SidePanelWithServices_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 SidePanelWithServices_extends.apply(this, arguments); }
 
 
 const SidePanelWithServices = ({
   servicesManager,
   side,
-  className,
   activeTabIndex: activeTabIndexProp,
-  tabs,
-  expandedWidth
+  tabs: tabsProp,
+  expandedWidth,
+  ...props
 }) => {
   const panelService = servicesManager?.services?.panelService;
 
@@ -2675,31 +2681,54 @@ const SidePanelWithServices = ({
   // Thus going to the Study List page and back to the viewer resets this flag for a SidePanel.
   const [hasBeenOpened, setHasBeenOpened] = (0,react.useState)(false);
   const [activeTabIndex, setActiveTabIndex] = (0,react.useState)(activeTabIndexProp);
+  const [tabs, setTabs] = (0,react.useState)(tabsProp ?? panelService.getPanels(side));
+  const handleSidePanelOpen = (0,react.useCallback)(() => {
+    setHasBeenOpened(true);
+  }, []);
+  const handleActiveTabIndexChange = (0,react.useCallback)(({
+    activeTabIndex
+  }) => {
+    setActiveTabIndex(activeTabIndex);
+  }, []);
+
+  /** update the active tab index from outside */
   (0,react.useEffect)(() => {
-    if (panelService) {
-      const activatePanelSubscription = panelService.subscribe(panelService.EVENTS.ACTIVATE_PANEL, activatePanelEvent => {
-        if (!hasBeenOpened || activatePanelEvent.forceActive) {
-          const tabIndex = tabs.findIndex(tab => tab.id === activatePanelEvent.panelId);
-          if (tabIndex !== -1) {
-            setActiveTabIndex(tabIndex);
-          }
+    setActiveTabIndex(activeTabIndexProp);
+  }, [activeTabIndexProp]);
+  (0,react.useEffect)(() => {
+    const {
+      unsubscribe
+    } = panelService.subscribe(panelService.EVENTS.PANELS_CHANGED, panelChangedEvent => {
+      if (panelChangedEvent.position !== side) {
+        return;
+      }
+      setTabs(panelService.getPanels(side));
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [panelService, side]);
+  (0,react.useEffect)(() => {
+    const activatePanelSubscription = panelService.subscribe(panelService.EVENTS.ACTIVATE_PANEL, activatePanelEvent => {
+      if (!hasBeenOpened || activatePanelEvent.forceActive) {
+        const tabIndex = tabs.findIndex(tab => tab.id === activatePanelEvent.panelId);
+        if (tabIndex !== -1) {
+          setActiveTabIndex(tabIndex);
         }
-      });
-      return () => {
-        activatePanelSubscription.unsubscribe();
-      };
-    }
+      }
+    });
+    return () => {
+      activatePanelSubscription.unsubscribe();
+    };
   }, [tabs, hasBeenOpened, panelService]);
-  return /*#__PURE__*/react.createElement(ui_src/* SidePanel */.wv, {
+  return /*#__PURE__*/react.createElement(ui_src/* SidePanel */.wv, SidePanelWithServices_extends({}, props, {
     side: side,
-    className: className,
-    activeTabIndex: activeTabIndex,
     tabs: tabs,
-    onOpen: () => {
-      setHasBeenOpened(true);
-    },
+    activeTabIndex: activeTabIndex,
+    onOpen: handleSidePanelOpen,
+    onActiveTabIndexChange: handleActiveTabIndexChange,
     expandedWidth: expandedWidth
-  });
+  }));
 };
 /* harmony default export */ const Components_SidePanelWithServices = (SidePanelWithServices);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/ViewerLayout/index.tsx
@@ -2719,16 +2748,20 @@ function ViewerLayout({
   // From Modes
   viewports,
   ViewportGridComp,
-  leftPanels = [],
-  rightPanels = [],
-  leftPanelDefaultClosed = false,
-  rightPanelDefaultClosed = false
+  leftPanelClosed = false,
+  rightPanelClosed = false
 }) {
   const [appConfig] = (0,state/* useAppConfig */.r)();
   const {
+    panelService,
     hangingProtocolService
   } = servicesManager.services;
   const [showLoadingIndicator, setShowLoadingIndicator] = (0,react.useState)(appConfig.showLoadingIndicator);
+  const hasPanels = (0,react.useCallback)(side => !!panelService.getPanels(side).length, [panelService]);
+  const [hasRightPanels, setHasRightPanels] = (0,react.useState)(hasPanels('right'));
+  const [hasLeftPanels, setHasLeftPanels] = (0,react.useState)(hasPanels('left'));
+  const [leftPanelClosedState, setLeftPanelClosed] = (0,react.useState)(leftPanelClosed);
+  const [rightPanelClosedState, setRightPanelClosed] = (0,react.useState)(rightPanelClosed);
 
   /**
    * Set body classes (tailwindcss) that don't allow vertical
@@ -2753,21 +2786,6 @@ function ViewerLayout({
       content: entry.component
     };
   };
-  const getPanelData = id => {
-    const {
-      content,
-      entry
-    } = getComponent(id);
-    return {
-      id: entry.id,
-      iconName: entry.iconName,
-      iconLabel: entry.iconLabel,
-      label: entry.label,
-      name: entry.name,
-      content,
-      contexts: entry.contexts
-    };
-  };
   (0,react.useEffect)(() => {
     const {
       unsubscribe
@@ -2791,13 +2809,31 @@ function ViewerLayout({
       displaySetsToDisplay: viewportComponent.displaySetsToDisplay
     };
   };
-  const leftPanelComponents = leftPanels.map(getPanelData);
-  const rightPanelComponents = rightPanels.map(getPanelData);
+  (0,react.useEffect)(() => {
+    const {
+      unsubscribe
+    } = panelService.subscribe(panelService.EVENTS.PANELS_CHANGED, ({
+      options
+    }) => {
+      setHasLeftPanels(hasPanels('left'));
+      setHasRightPanels(hasPanels('right'));
+      if (options?.leftPanelClosed !== undefined) {
+        setLeftPanelClosed(options.leftPanelClosed);
+      }
+      if (options?.rightPanelClosed !== undefined) {
+        setRightPanelClosed(options.rightPanelClosed);
+      }
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [panelService, hasPanels]);
   const viewportComponents = viewports.map(getViewportComponentData);
   return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement(ViewerLayout_ViewerHeader, {
     hotkeysManager: hotkeysManager,
     extensionManager: extensionManager,
-    servicesManager: servicesManager
+    servicesManager: servicesManager,
+    appConfig: appConfig
   }), /*#__PURE__*/react.createElement("div", {
     className: "relative flex w-full flex-row flex-nowrap items-stretch overflow-hidden bg-black",
     style: {
@@ -2805,12 +2841,11 @@ function ViewerLayout({
     }
   }, /*#__PURE__*/react.createElement(react.Fragment, null, showLoadingIndicator && /*#__PURE__*/react.createElement(ui_src/* LoadingIndicatorProgress */.Jx, {
     className: "h-full w-full bg-black"
-  }), leftPanelComponents.length ? /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.tH, {
+  }), hasLeftPanels ? /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.tH, {
     context: "Left Panel"
   }, /*#__PURE__*/react.createElement(Components_SidePanelWithServices, {
     side: "left",
-    activeTabIndex: leftPanelDefaultClosed ? null : 0,
-    tabs: leftPanelComponents,
+    activeTabIndex: leftPanelClosedState ? null : 0,
     servicesManager: servicesManager
   })) : null, /*#__PURE__*/react.createElement("div", {
     className: "flex h-full flex-1 flex-col"
@@ -2822,12 +2857,11 @@ function ViewerLayout({
     servicesManager: servicesManager,
     viewportComponents: viewportComponents,
     commandsManager: commandsManager
-  })))), rightPanelComponents.length ? /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.tH, {
+  })))), hasRightPanels ? /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.tH, {
     context: "Right Panel"
   }, /*#__PURE__*/react.createElement(Components_SidePanelWithServices, {
     side: "right",
-    activeTabIndex: rightPanelDefaultClosed ? null : 0,
-    tabs: rightPanelComponents,
+    activeTabIndex: rightPanelClosedState ? null : 0,
     servicesManager: servicesManager
   })) : null)), /*#__PURE__*/react.createElement(ui_src/* InvestigationalUseDialog */.j, {
     dialogConfiguration: appConfig?.investigationalUseDialog
@@ -2843,8 +2877,8 @@ ViewerLayout.propTypes = {
   // From modes
   leftPanels: (prop_types_default()).array,
   rightPanels: (prop_types_default()).array,
-  leftPanelDefaultClosed: (prop_types_default()).bool.isRequired,
-  rightPanelDefaultClosed: (prop_types_default()).bool.isRequired,
+  leftPanelClosed: (prop_types_default()).bool.isRequired,
+  rightPanelClosed: (prop_types_default()).bool.isRequired,
   /** Responsible for rendering our grid of viewports; provided by consuming application */
   children: prop_types_default().oneOfType([(prop_types_default()).node, (prop_types_default()).func]).isRequired,
   viewports: (prop_types_default()).array
@@ -3321,38 +3355,6 @@ WrappedPanelStudyBrowser.propTypes = {
   servicesManager: (prop_types_default()).object.isRequired
 };
 /* harmony default export */ const Panels_WrappedPanelStudyBrowser = (WrappedPanelStudyBrowser);
-;// CONCATENATED MODULE: ../../../extensions/default/src/Panels/ActionButtons.tsx
-
-
-
-
-function ActionButtons({
-  onExportClick,
-  onCreateReportClick
-}) {
-  const {
-    t
-  } = (0,es/* useTranslation */.Bd)('MeasurementTable');
-  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ui_src/* LegacyButtonGroup */.xA, {
-    color: "black",
-    size: "inherit"
-  }, /*#__PURE__*/react.createElement(ui_src/* LegacyButton */._H, {
-    className: "px-2 py-2 text-base",
-    onClick: onExportClick
-  }, t('Export CSV')), /*#__PURE__*/react.createElement(ui_src/* LegacyButton */._H, {
-    className: "px-2 py-2 text-base",
-    onClick: onCreateReportClick
-  }, t('Create Report'))));
-}
-ActionButtons.propTypes = {
-  onExportClick: (prop_types_default()).func,
-  onCreateReportClick: (prop_types_default()).func
-};
-ActionButtons.defaultProps = {
-  onExportClick: () => alert('Export'),
-  onCreateReportClick: () => alert('Create Report')
-};
-/* harmony default export */ const Panels_ActionButtons = (ActionButtons);
 // EXTERNAL MODULE: ../../../node_modules/lodash.debounce/index.js
 var lodash_debounce = __webpack_require__(14771);
 var lodash_debounce_default = /*#__PURE__*/__webpack_require__.n(lodash_debounce);
@@ -3624,7 +3626,6 @@ function findSRWithSameSeriesDescription(SeriesDescription, displaySetService) {
 
 
 
-
 const {
   downloadCSVReport
 } = src.utils;
@@ -3831,17 +3832,22 @@ function PanelMeasurementTable({
     className: "ohif-scrollbar overflow-y-auto overflow-x-hidden",
     "data-cy": 'measurements-panel'
   }, /*#__PURE__*/react.createElement(ui_src/* MeasurementTable */.V, {
-    title: t("Measurements"),
+    title: t('Measurements'),
     servicesManager: servicesManager,
     data: displayMeasurements,
     onClick: jumpToImage,
     onEdit: onMeasurementItemEditHandler
   })), /*#__PURE__*/react.createElement("div", {
     className: "flex justify-center p-4"
-  }, /*#__PURE__*/react.createElement(Panels_ActionButtons, {
-    onExportClick: exportReport,
-    onClearMeasurementsClick: clearMeasurements,
-    onCreateReportClick: createReport
+  }, /*#__PURE__*/react.createElement(ui_src/* ActionButtons */.wr, {
+    t: t('MeasurementTable'),
+    actions: [{
+      label: 'Export',
+      onClick: exportReport
+    }, {
+      label: 'Create Report',
+      onClick: createReport
+    }]
   })));
 }
 PanelMeasurementTable.propTypes = {
@@ -4060,8 +4066,8 @@ function areAllImageOrientationsEqual(instances) {
   }
   return true;
 }
-// EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 10 modules
-var esm = __webpack_require__(83636);
+// EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 1 modules
+var esm = __webpack_require__(44753);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/utils/calculateScanAxisNormal.ts
 
 
@@ -4211,8 +4217,11 @@ function checkSingleFrames(instances, messages) {
  *
  * @param {Object[]} instances An array of `OHIFInstanceMetadata` objects.
  */
-function getDisplaySetMessages(instances, isReconstructable) {
+function getDisplaySetMessages(instances, isReconstructable, isDynamicVolume) {
   const messages = new src/* DisplaySetMessageList */.WZ();
+  if (isDynamicVolume) {
+    return messages;
+  }
   if (!instances.length) {
     messages.addMessage(src/* DisplaySetMessage */.Ob.CODES.NO_VALID_INSTANCES);
     return;
@@ -4273,6 +4282,86 @@ function getDisplaySetsFromUnsupportedSeries(instances) {
   });
   return [imageSet];
 }
+;// CONCATENATED MODULE: ../../../extensions/default/src/SOPClassHandlers/chartSOPClassHandler.ts
+
+
+const SOPClassHandlerName = 'chart';
+const CHART_MODALITY = 'CHT';
+
+// Private SOPClassUid for chart data
+const ChartDataSOPClassUid = '1.9.451.13215.7.3.2.7.6.1';
+const sopClassUids = [ChartDataSOPClassUid];
+const makeChartDataDisplaySet = (instance, sopClassUids) => {
+  const {
+    StudyInstanceUID,
+    SeriesInstanceUID,
+    SOPInstanceUID,
+    SeriesDescription,
+    SeriesNumber,
+    SeriesDate,
+    SOPClassUID
+  } = instance;
+  return {
+    Modality: CHART_MODALITY,
+    loading: false,
+    isReconstructable: false,
+    displaySetInstanceUID: src.utils.guid(),
+    SeriesDescription,
+    SeriesNumber,
+    SeriesDate,
+    SOPInstanceUID,
+    SeriesInstanceUID,
+    StudyInstanceUID,
+    SOPClassHandlerId: `${id}.sopClassHandlerModule.${SOPClassHandlerName}`,
+    SOPClassUID,
+    isDerivedDisplaySet: true,
+    isLoaded: true,
+    sopClassUids,
+    instance,
+    instances: [instance],
+    /**
+     * Adds instances to the chart displaySet, rather than creating a new one
+     * when user moves to a different workflow step and gets back to a step that
+     * recreates the chart
+     */
+    addInstances: function (instances, _displaySetService) {
+      this.instances.push(...instances);
+      this.instance = this.instances[this.instances.length - 1];
+      return this;
+    }
+  };
+};
+function getSopClassUids(instances) {
+  const uniqueSopClassUidsInSeries = new Set();
+  instances.forEach(instance => {
+    uniqueSopClassUidsInSeries.add(instance.SOPClassUID);
+  });
+  const sopClassUids = Array.from(uniqueSopClassUidsInSeries);
+  return sopClassUids;
+}
+function _getDisplaySetsFromSeries(instances) {
+  debugger;
+  // If the series has no instances, stop here
+  if (!instances || !instances.length) {
+    throw new Error('No instances were provided');
+  }
+  const sopClassUids = getSopClassUids(instances);
+  const displaySets = instances.map(instance => {
+    if (instance.Modality === CHART_MODALITY) {
+      return makeChartDataDisplaySet(instance, sopClassUids);
+    }
+    throw new Error('Unsupported modality');
+  });
+  return displaySets;
+}
+const chartHandler = {
+  name: SOPClassHandlerName,
+  sopClassUids,
+  getDisplaySetsFromSeries: instances => {
+    return _getDisplaySetsFromSeries(instances);
+  }
+};
+
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getSopClassHandlerModule.js
 
 
@@ -4281,20 +4370,69 @@ function getDisplaySetsFromUnsupportedSeries(instances) {
 
 
 
+
+const DEFAULT_VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
+const DYNAMIC_VOLUME_LOADER_SCHEME = 'cornerstoneStreamingDynamicImageVolume';
 const sopClassHandlerName = 'stack';
+let appContext = {};
+const getDynamicVolumeInfo = instances => {
+  const {
+    extensionManager
+  } = appContext;
+  if (!extensionManager) {
+    throw new Error('extensionManager is not available');
+  }
+  const imageIds = instances.map(({
+    imageId
+  }) => imageId);
+  const volumeLoaderUtility = extensionManager.getModuleEntry('@ohif/extension-cornerstone.utilityModule.volumeLoader');
+  const {
+    getDynamicVolumeInfo: csGetDynamicVolumeInfo
+  } = volumeLoaderUtility.exports;
+  return csGetDynamicVolumeInfo(imageIds);
+};
 const isMultiFrame = instance => {
   return instance.NumberOfFrames > 1;
 };
+function getDisplaySetInfo(instances) {
+  const dynamicVolumeInfo = getDynamicVolumeInfo(instances);
+  const {
+    isDynamicVolume,
+    timePoints
+  } = dynamicVolumeInfo;
+  let displaySetInfo;
+  if (isDynamicVolume) {
+    const timePoint = timePoints[0];
+    const instancesMap = new Map();
+
+    // O(n) to convert it into a map and O(1) to find each instance
+    instances.forEach(instance => instancesMap.set(instance.imageId, instance));
+    const firstTimePointInstances = timePoint.map(imageId => instancesMap.get(imageId));
+    displaySetInfo = (0,isDisplaySetReconstructable/* default */.Ay)(firstTimePointInstances);
+  } else {
+    displaySetInfo = (0,isDisplaySetReconstructable/* default */.Ay)(instances);
+  }
+  return {
+    isDynamicVolume,
+    ...displaySetInfo,
+    dynamicVolumeInfo
+  };
+}
 const makeDisplaySet = instances => {
   const instance = instances[0];
   const imageSet = new ImageSet/* default */.A(instances);
   const {
+    isDynamicVolume,
     value: isReconstructable,
-    averageSpacingBetweenFrames
-  } = (0,isDisplaySetReconstructable/* default */.Ay)(instances);
+    averageSpacingBetweenFrames,
+    dynamicVolumeInfo
+  } = getDisplaySetInfo(instances);
+  const volumeLoaderSchema = isDynamicVolume ? DYNAMIC_VOLUME_LOADER_SCHEME : DEFAULT_VOLUME_LOADER_SCHEME;
+
   // set appropriate attributes to image set...
-  const messages = getDisplaySetMessages(instances, isReconstructable);
+  const messages = getDisplaySetMessages(instances, isReconstructable, isDynamicVolume);
   imageSet.setAttributes({
+    volumeLoaderSchema,
     displaySetInstanceUID: imageSet.uid,
     // create a local alias for the imageSet UID
     SeriesDate: instance.SeriesDate,
@@ -4312,7 +4450,9 @@ const makeDisplaySet = instances => {
     SOPClassHandlerId: `${id}.sopClassHandlerModule.${sopClassHandlerName}`,
     isReconstructable,
     messages,
-    averageSpacingBetweenFrames: averageSpacingBetweenFrames || null
+    averageSpacingBetweenFrames: averageSpacingBetweenFrames || null,
+    isDynamicVolume,
+    dynamicVolumeInfo
   });
 
   // Sort the images in this series if needed
@@ -4343,7 +4483,7 @@ const makeDisplaySet = instances => {
 const isSingleImageModality = modality => {
   return modality === 'CR' || modality === 'MG' || modality === 'DX';
 };
-function getSopClassUids(instances) {
+function getSopClassHandlerModule_getSopClassUids(instances) {
   const uniqueSopClassUidsInSeries = new Set();
   instances.forEach(instance => {
     uniqueSopClassUidsInSeries.add(instance.SOPClassUID);
@@ -4357,7 +4497,6 @@ function getSopClassUids(instances) {
  * - For all Image types that are stackable, create
  *   a displaySet with a stack of images
  *
- * @param {Array} sopClassHandlerModules List of SOP Class Modules
  * @param {SeriesMetadata} series The series metadata object from which the display sets will be created
  * @returns {Array} The list of display sets created for the given series object
  */
@@ -4367,7 +4506,7 @@ function getDisplaySetsFromSeries(instances) {
     throw new Error('No instances were provided');
   }
   const displaySets = [];
-  const sopClassUids = getSopClassUids(instances);
+  const sopClassUids = getSopClassHandlerModule_getSopClassUids(instances);
 
   // Search through the instances (InstanceMetadata object) of this series
   // Split Multi-frame instances and Single-image modalities
@@ -4412,16 +4551,21 @@ function getDisplaySetsFromSeries(instances) {
   }
   return displaySets;
 }
-const sopClassUids = [sopClassDictionary/* default */.A.ComputedRadiographyImageStorage, sopClassDictionary/* default */.A.DigitalXRayImageStorageForPresentation, sopClassDictionary/* default */.A.DigitalXRayImageStorageForProcessing, sopClassDictionary/* default */.A.DigitalMammographyXRayImageStorageForPresentation, sopClassDictionary/* default */.A.DigitalMammographyXRayImageStorageForProcessing, sopClassDictionary/* default */.A.DigitalIntraOralXRayImageStorageForPresentation, sopClassDictionary/* default */.A.DigitalIntraOralXRayImageStorageForProcessing, sopClassDictionary/* default */.A.CTImageStorage, sopClassDictionary/* default */.A.EnhancedCTImageStorage, sopClassDictionary/* default */.A.LegacyConvertedEnhancedCTImageStorage, sopClassDictionary/* default */.A.UltrasoundMultiframeImageStorage, sopClassDictionary/* default */.A.MRImageStorage, sopClassDictionary/* default */.A.EnhancedMRImageStorage, sopClassDictionary/* default */.A.EnhancedMRColorImageStorage, sopClassDictionary/* default */.A.LegacyConvertedEnhancedMRImageStorage, sopClassDictionary/* default */.A.UltrasoundImageStorage, sopClassDictionary/* default */.A.UltrasoundImageStorageRET, sopClassDictionary/* default */.A.SecondaryCaptureImageStorage, sopClassDictionary/* default */.A.MultiframeSingleBitSecondaryCaptureImageStorage, sopClassDictionary/* default */.A.MultiframeGrayscaleByteSecondaryCaptureImageStorage, sopClassDictionary/* default */.A.MultiframeGrayscaleWordSecondaryCaptureImageStorage, sopClassDictionary/* default */.A.MultiframeTrueColorSecondaryCaptureImageStorage, sopClassDictionary/* default */.A.XRayAngiographicImageStorage, sopClassDictionary/* default */.A.EnhancedXAImageStorage, sopClassDictionary/* default */.A.XRayRadiofluoroscopicImageStorage, sopClassDictionary/* default */.A.EnhancedXRFImageStorage, sopClassDictionary/* default */.A.XRay3DAngiographicImageStorage, sopClassDictionary/* default */.A.XRay3DCraniofacialImageStorage, sopClassDictionary/* default */.A.BreastTomosynthesisImageStorage, sopClassDictionary/* default */.A.BreastProjectionXRayImageStorageForPresentation, sopClassDictionary/* default */.A.BreastProjectionXRayImageStorageForProcessing, sopClassDictionary/* default */.A.IntravascularOpticalCoherenceTomographyImageStorageForPresentation, sopClassDictionary/* default */.A.IntravascularOpticalCoherenceTomographyImageStorageForProcessing, sopClassDictionary/* default */.A.NuclearMedicineImageStorage, sopClassDictionary/* default */.A.VLEndoscopicImageStorage, sopClassDictionary/* default */.A.VideoEndoscopicImageStorage, sopClassDictionary/* default */.A.VLMicroscopicImageStorage, sopClassDictionary/* default */.A.VideoMicroscopicImageStorage, sopClassDictionary/* default */.A.VLSlideCoordinatesMicroscopicImageStorage, sopClassDictionary/* default */.A.VLPhotographicImageStorage, sopClassDictionary/* default */.A.VideoPhotographicImageStorage, sopClassDictionary/* default */.A.OphthalmicPhotography8BitImageStorage, sopClassDictionary/* default */.A.OphthalmicPhotography16BitImageStorage, sopClassDictionary/* default */.A.OphthalmicTomographyImageStorage, sopClassDictionary/* default */.A.VLWholeSlideMicroscopyImageStorage, sopClassDictionary/* default */.A.PositronEmissionTomographyImageStorage, sopClassDictionary/* default */.A.EnhancedPETImageStorage, sopClassDictionary/* default */.A.LegacyConvertedEnhancedPETImageStorage, sopClassDictionary/* default */.A.RTImageStorage, sopClassDictionary/* default */.A.EnhancedUSVolumeStorage];
-function getSopClassHandlerModule() {
+const getSopClassHandlerModule_sopClassUids = [sopClassDictionary/* default */.A.ComputedRadiographyImageStorage, sopClassDictionary/* default */.A.DigitalXRayImageStorageForPresentation, sopClassDictionary/* default */.A.DigitalXRayImageStorageForProcessing, sopClassDictionary/* default */.A.DigitalMammographyXRayImageStorageForPresentation, sopClassDictionary/* default */.A.DigitalMammographyXRayImageStorageForProcessing, sopClassDictionary/* default */.A.DigitalIntraOralXRayImageStorageForPresentation, sopClassDictionary/* default */.A.DigitalIntraOralXRayImageStorageForProcessing, sopClassDictionary/* default */.A.CTImageStorage, sopClassDictionary/* default */.A.EnhancedCTImageStorage, sopClassDictionary/* default */.A.LegacyConvertedEnhancedCTImageStorage, sopClassDictionary/* default */.A.UltrasoundMultiframeImageStorage, sopClassDictionary/* default */.A.MRImageStorage, sopClassDictionary/* default */.A.EnhancedMRImageStorage, sopClassDictionary/* default */.A.EnhancedMRColorImageStorage, sopClassDictionary/* default */.A.LegacyConvertedEnhancedMRImageStorage, sopClassDictionary/* default */.A.UltrasoundImageStorage, sopClassDictionary/* default */.A.UltrasoundImageStorageRET, sopClassDictionary/* default */.A.SecondaryCaptureImageStorage, sopClassDictionary/* default */.A.MultiframeSingleBitSecondaryCaptureImageStorage, sopClassDictionary/* default */.A.MultiframeGrayscaleByteSecondaryCaptureImageStorage, sopClassDictionary/* default */.A.MultiframeGrayscaleWordSecondaryCaptureImageStorage, sopClassDictionary/* default */.A.MultiframeTrueColorSecondaryCaptureImageStorage, sopClassDictionary/* default */.A.XRayAngiographicImageStorage, sopClassDictionary/* default */.A.EnhancedXAImageStorage, sopClassDictionary/* default */.A.XRayRadiofluoroscopicImageStorage, sopClassDictionary/* default */.A.EnhancedXRFImageStorage, sopClassDictionary/* default */.A.XRay3DAngiographicImageStorage, sopClassDictionary/* default */.A.XRay3DCraniofacialImageStorage, sopClassDictionary/* default */.A.BreastTomosynthesisImageStorage, sopClassDictionary/* default */.A.BreastProjectionXRayImageStorageForPresentation, sopClassDictionary/* default */.A.BreastProjectionXRayImageStorageForProcessing, sopClassDictionary/* default */.A.IntravascularOpticalCoherenceTomographyImageStorageForPresentation, sopClassDictionary/* default */.A.IntravascularOpticalCoherenceTomographyImageStorageForProcessing, sopClassDictionary/* default */.A.NuclearMedicineImageStorage, sopClassDictionary/* default */.A.VLEndoscopicImageStorage, sopClassDictionary/* default */.A.VideoEndoscopicImageStorage, sopClassDictionary/* default */.A.VLMicroscopicImageStorage, sopClassDictionary/* default */.A.VideoMicroscopicImageStorage, sopClassDictionary/* default */.A.VLSlideCoordinatesMicroscopicImageStorage, sopClassDictionary/* default */.A.VLPhotographicImageStorage, sopClassDictionary/* default */.A.VideoPhotographicImageStorage, sopClassDictionary/* default */.A.OphthalmicPhotography8BitImageStorage, sopClassDictionary/* default */.A.OphthalmicPhotography16BitImageStorage, sopClassDictionary/* default */.A.OphthalmicTomographyImageStorage, sopClassDictionary/* default */.A.VLWholeSlideMicroscopyImageStorage, sopClassDictionary/* default */.A.PositronEmissionTomographyImageStorage, sopClassDictionary/* default */.A.EnhancedPETImageStorage, sopClassDictionary/* default */.A.LegacyConvertedEnhancedPETImageStorage, sopClassDictionary/* default */.A.RTImageStorage, sopClassDictionary/* default */.A.EnhancedUSVolumeStorage];
+function getSopClassHandlerModule(appContextParam) {
+  appContext = appContextParam;
   return [{
     name: sopClassHandlerName,
-    sopClassUids,
+    sopClassUids: getSopClassHandlerModule_sopClassUids,
     getDisplaySetsFromSeries
   }, {
     name: 'not-supported-display-sets-handler',
     sopClassUids: [],
     getDisplaySetsFromSeries: getDisplaySetsFromUnsupportedSeries
+  }, {
+    name: chartHandler.name,
+    sopClassUids: chartHandler.sopClassUids,
+    getDisplaySetsFromSeries: chartHandler.getDisplaySetsFromSeries
   }];
 }
 /* harmony default export */ const src_getSopClassHandlerModule = (getSopClassHandlerModule);
@@ -4721,12 +4865,97 @@ function ToolbarButtonGroupWithServices({
   return /*#__PURE__*/react.createElement(ui_src/* ButtonGroup */.e2, null, getSplitButtonItems(items));
 }
 /* harmony default export */ const Toolbar_ToolbarButtonGroupWithServices = (ToolbarButtonGroupWithServices);
+;// CONCATENATED MODULE: ../../../extensions/default/src/components/ProgressDropdownWithService/ProgressDropdownWithService.tsx
+
+
+const workflowStepsToDropdownOptions = (steps = []) => steps.map(step => ({
+  label: step.name,
+  value: step.id,
+  info: step.info,
+  activated: false,
+  completed: false
+}));
+function ProgressDropdownWithService({
+  servicesManager
+}) {
+  const {
+    workflowStepsService
+  } = servicesManager.services;
+  const [activeStepId, setActiveStepId] = (0,react.useState)(workflowStepsService.activeWorkflowStep?.id);
+  const [dropdownOptions, setDropdownOptions] = (0,react.useState)(workflowStepsToDropdownOptions(workflowStepsService.workflowSteps));
+  const setCurrentAndPreviousOptionsAsCompleted = (0,react.useCallback)(currentOption => {
+    if (currentOption.completed) {
+      return;
+    }
+    setDropdownOptions(prevOptions => {
+      const newOptionsState = [...prevOptions];
+      const startIndex = newOptionsState.findIndex(option => option.value === currentOption.value);
+      for (let i = startIndex; i >= 0; i--) {
+        const option = newOptionsState[i];
+        if (option.completed) {
+          break;
+        }
+        newOptionsState[i] = {
+          ...option,
+          completed: true
+        };
+      }
+      return newOptionsState;
+    });
+  }, []);
+  const handleDropdownChange = (0,react.useCallback)(({
+    selectedOption
+  }) => {
+    if (!selectedOption) {
+      return;
+    }
+
+    // TODO: Steps should be marked as completed after user has
+    // completed some action when required (not implemented)
+    setCurrentAndPreviousOptionsAsCompleted(selectedOption);
+    setActiveStepId(selectedOption.value);
+  }, [setCurrentAndPreviousOptionsAsCompleted]);
+  (0,react.useEffect)(() => {
+    let timeoutId;
+    if (activeStepId) {
+      // We've used setTimeout to give it more time to update the UI since
+      // create3DFilterableFromDataArray from Texture.js may take 600+ ms to run
+      // when there is a new series to load in the next step but that resulted
+      // in the followed React error when updating the content from left/right panels
+      // and all component states were being lost:
+      //   Error: Can't perform a React state update on an unmounted component
+      workflowStepsService.setActiveWorkflowStep(activeStepId);
+    }
+    return () => clearTimeout(timeoutId);
+  }, [activeStepId, workflowStepsService]);
+  (0,react.useEffect)(() => {
+    const {
+      unsubscribe: unsubStepsChanged
+    } = workflowStepsService.subscribe(workflowStepsService.EVENTS.STEPS_CHANGED, () => setDropdownOptions(workflowStepsToDropdownOptions(workflowStepsService.workflowSteps)));
+    const {
+      unsubscribe: unsubActiveStepChanged
+    } = workflowStepsService.subscribe(workflowStepsService.EVENTS.ACTIVE_STEP_CHANGED, () => setActiveStepId(workflowStepsService.activeWorkflowStep.id));
+    return () => {
+      unsubStepsChanged();
+      unsubActiveStepChanged();
+    };
+  }, [servicesManager, workflowStepsService]);
+  return /*#__PURE__*/react.createElement(ui_src/* ProgressDropdown */.LW, {
+    options: dropdownOptions,
+    value: activeStepId,
+    onChange: handleDropdownChange
+  });
+}
+/* harmony default export */ const ProgressDropdownWithService_ProgressDropdownWithService = (ProgressDropdownWithService);
+;// CONCATENATED MODULE: ../../../extensions/default/src/components/ProgressDropdownWithService/index.js
+
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getToolbarModule.tsx
 
 
 
 
 
+
 const getClassName = isToggled => {
   return {
     className: isToggled ? '!text-primary-active' : '!text-common-bright hover:!bg-primary-dark hover:text-primary-light'
@@ -4758,6 +4987,9 @@ function getToolbarModule({
   }, {
     name: 'ohif.buttonGroup',
     defaultComponent: Toolbar_ToolbarButtonGroupWithServices
+  }, {
+    name: 'ohif.progressDropdown',
+    defaultComponent: ProgressDropdownWithService_ProgressDropdownWithService
   }, {
     name: 'evaluate.group.promoteToPrimary',
     evaluate: ({
@@ -4956,10 +5188,10 @@ function adaptItem(item, subProps) {
 }
 // EXTERNAL MODULE: ../../ui/src/components/ContextMenu/ContextMenu.tsx
 var ContextMenu = __webpack_require__(59852);
-// 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/default/src/CustomizableContextMenu/ContextMenuController.tsx
-var _class;
+var _ContextMenuController;
 
 
 
@@ -5074,7 +5306,7 @@ class ContextMenuController {
     });
   }
 }
-_class = ContextMenuController;
+_ContextMenuController = ContextMenuController;
 ContextMenuController.getDefaultPosition = () => {
   return {
     x: 0,
@@ -5099,13 +5331,13 @@ ContextMenuController._getElementDefaultPosition = element => {
   };
 };
 ContextMenuController._getCanvasPointsPosition = (points = [], element) => {
-  const viewerPos = _class._getElementDefaultPosition(element);
+  const viewerPos = _ContextMenuController._getElementDefaultPosition(element);
   for (let pointIndex = 0; pointIndex < points.length; pointIndex++) {
     const point = {
       x: points[pointIndex][0] || points[pointIndex]['x'],
       y: points[pointIndex][1] || points[pointIndex]['y']
     };
-    if (_class._isValidPosition(point) && _class._isValidPosition(viewerPos)) {
+    if (_ContextMenuController._isValidPosition(point) && _ContextMenuController._isValidPosition(viewerPos)) {
       return {
         x: point.x + viewerPos.x,
         y: point.y + viewerPos.y
@@ -5121,17 +5353,17 @@ ContextMenuController._isValidPosition = source => {
  */
 ContextMenuController._getDefaultPosition = (canvasPoints, eventDetail, viewerElement) => {
   function* getPositionIterator() {
-    yield _class._getCanvasPointsPosition(canvasPoints, viewerElement);
-    yield _class._getEventDefaultPosition(eventDetail);
-    yield _class._getElementDefaultPosition(viewerElement);
-    yield _class.getDefaultPosition();
+    yield _ContextMenuController._getCanvasPointsPosition(canvasPoints, viewerElement);
+    yield _ContextMenuController._getEventDefaultPosition(eventDetail);
+    yield _ContextMenuController._getElementDefaultPosition(viewerElement);
+    yield _ContextMenuController.getDefaultPosition();
   }
   const positionIterator = getPositionIterator();
   let current = positionIterator.next();
   let position = current.value;
   while (!current.done) {
     position = current.value;
-    if (_class._isValidPosition(position)) {
+    if (_ContextMenuController._isValidPosition(position)) {
       positionIterator.return();
     }
     current = positionIterator.next();
@@ -5684,6 +5916,9 @@ const reuseCachedLayout = (state, hangingProtocolService, syncService) => {
   const {
     protocol
   } = hangingProtocolService.getActiveProtocol();
+  if (!protocol) {
+    return;
+  }
   const hpInfo = hangingProtocolService.getState();
   const {
     protocolId,
@@ -5857,12 +6092,6 @@ var index = __webpack_require__(68870);
 const {
   subscribeToNextViewportGridChange
 } = src.utils;
-/**
- * Determine if a command is a hanging protocol one.
- * For now, just use the two hanging protocol commands that are in this
- * commands module, but if others get added elsewhere this may need enhancing.
- */
-const isHangingProtocolCommand = command => command && (command.commandName === 'setHangingProtocol' || command.commandName === 'toggleHangingProtocol');
 const commandsModule = ({
   servicesManager,
   commandsManager
@@ -5874,8 +6103,7 @@ const commandsModule = ({
     uiNotificationService,
     viewportGridService,
     displaySetService,
-    stateSyncService,
-    toolbarService
+    stateSyncService
   } = servicesManager.services;
 
   // Define a context menu controller for use with any context menus
@@ -7382,6 +7610,7 @@ class GoogleCloudDataSourceConfigurationAPI {
 
 
 
+
 /**
  *
  * Note: this is an example of how the customization module can be used
@@ -7519,9 +7748,60 @@ function getCustomizationModule({
       // The factory for creating an instance of a BaseDataSourceConfigurationAPI for Google Cloud Healthcare
       id: 'ohif.dataSourceConfigurationAPI.google',
       factory: dataSourceName => new GoogleCloudDataSourceConfigurationAPI(dataSourceName, servicesManager, extensionManager)
+    }, {
+      id: 'progressDropdownWithServiceComponent',
+      component: ProgressDropdownWithService_ProgressDropdownWithService
     }]
   }];
 }
+;// CONCATENATED MODULE: ../../../extensions/default/src/Components/LineChartViewport/LineChartViewport.tsx
+
+
+const LineChartViewport = ({
+  displaySets
+}) => {
+  const displaySet = displaySets[0];
+  const {
+    axis: chartAxis,
+    series: chartSeries
+  } = displaySet.instance.chartData;
+  return /*#__PURE__*/react.createElement(ui_src/* LineChart */.bl, {
+    showLegend: true,
+    legendWidth: 150,
+    axis: {
+      x: {
+        label: chartAxis.x.label,
+        indexRef: 0,
+        type: 'x',
+        range: {
+          min: 0
+        }
+      },
+      y: {
+        label: chartAxis.y.label,
+        indexRef: 1,
+        type: 'y'
+      }
+    },
+    series: chartSeries
+  });
+};
+
+;// CONCATENATED MODULE: ../../../extensions/default/src/Components/LineChartViewport/index.ts
+
+;// CONCATENATED MODULE: ../../../extensions/default/src/getViewportModule.tsx
+
+const getViewportModule = ({
+  servicesManager,
+  commandsManager,
+  extensionManager
+}) => {
+  return [{
+    name: 'chartViewport',
+    component: LineChartViewport
+  }];
+};
+
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/calculate-suv/dist/calculate-suv.esm.js
 var calculate_suv_esm = __webpack_require__(79717);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getPTImageIdInstanceMetadata.ts
@@ -7686,7 +7966,7 @@ function init({
         groupId,
         items,
         listeners
-      } = button.props;
+      } = button.props || {};
 
       // Handle group items' listeners
       if (groupId && items) {
@@ -7759,6 +8039,7 @@ const handlePETImageMetadata = ({
 
 
 
+
 const defaultExtension = {
   /**
    * Only required property. Should be a unique value across all extensions.
@@ -7766,6 +8047,7 @@ const defaultExtension = {
   id: id,
   preRegistration: init,
   getDataSourcesModule: src_getDataSourcesModule,
+  getViewportModule: getViewportModule,
   getLayoutTemplateModule: getLayoutTemplateModule,
   getPanelModule: src_getPanelModule,
   getHangingProtocolModule: src_getHangingProtocolModule,