@ohif/app 3.9.0-beta.45 → 3.9.0-beta.47

package/dist/{121.bundle.57fe5a392b0910f33c2d.js → 552.bundle.95c0f28b051797242104.js}

@@ -1,7 +1,673 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[121],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[552,757],{
 
-/***/ 67121:
+/***/ 3094:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ src_DicomMicroscopyViewport)
+});
+
+// EXTERNAL MODULE: ../../../node_modules/react/index.js
+var react = __webpack_require__(43001);
+// EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
+var prop_types = __webpack_require__(3827);
+var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
+// EXTERNAL MODULE: ../../ui/src/index.js + 784 modules
+var src = __webpack_require__(38604);
+;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/DicomMicroscopyViewport.css
+// extracted by mini-css-extract-plugin
+
+// EXTERNAL MODULE: ../../../node_modules/classnames/index.js
+var classnames = __webpack_require__(33901);
+var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
+;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/components/ViewportOverlay/listComponentGenerator.tsx
+const listComponentGenerator = props => {
+  const {
+    list,
+    itemGenerator
+  } = props;
+  if (!list) {
+    return;
+  }
+  return list.map(item => {
+    if (!item) {
+      return;
+    }
+    const generator = item.generator || itemGenerator;
+    if (!generator) {
+      throw new Error(`No generator for ${item}`);
+    }
+    return generator({
+      ...props,
+      item
+    });
+  });
+};
+/* harmony default export */ const ViewportOverlay_listComponentGenerator = (listComponentGenerator);
+;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/components/ViewportOverlay/ViewportOverlay.css
+// extracted by mini-css-extract-plugin
+
+// EXTERNAL MODULE: ../../../node_modules/moment/moment.js
+var moment_moment = __webpack_require__(71271);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 28 modules
+var esm = __webpack_require__(62709);
+;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/components/ViewportOverlay/utils.ts
+
+
+
+/**
+ * Checks if value is valid.
+ *
+ * @param {number} value
+ * @returns {boolean} is valid.
+ */
+function isValidNumber(value) {
+  return typeof value === 'number' && !isNaN(value);
+}
+
+/**
+ * Formats number precision.
+ *
+ * @param {number} number
+ * @param {number} precision
+ * @returns {number} formatted number.
+ */
+function utils_formatNumberPrecision(number, precision) {
+  if (number !== null) {
+    return parseFloat(number).toFixed(precision);
+  }
+}
+
+/**
+ * Formats DICOM date.
+ *
+ * @param {string} date
+ * @param {string} strFormat
+ * @returns {string} formatted date.
+ */
+function utils_formatDICOMDate(date, strFormat = 'MMM D, YYYY') {
+  return moment(date, 'YYYYMMDD').format(strFormat);
+}
+
+/**
+ *    DICOM Time is stored as HHmmss.SSS, where:
+ *      HH 24 hour time:
+ *        m mm        0..59   Minutes
+ *        s ss        0..59   Seconds
+ *        S SS SSS    0..999  Fractional seconds
+ *
+ *        Goal: '24:12:12'
+ *
+ * @param {*} time
+ * @param {string} strFormat
+ * @returns {string} formatted name.
+ */
+function utils_formatDICOMTime(time, strFormat = 'HH:mm:ss') {
+  return moment(time, 'HH:mm:ss').format(strFormat);
+}
+
+/**
+ * Formats a patient name for display purposes
+ *
+ * @param {string} name
+ * @returns {string} formatted name.
+ */
+function utils_formatPN(name) {
+  if (!name) {
+    return;
+  }
+
+  // Convert the first ^ to a ', '. String.replace() only affects
+  // the first appearance of the character.
+  const commaBetweenFirstAndLast = name.replace('^', ', ');
+
+  // Replace any remaining '^' characters with spaces
+  const cleaned = commaBetweenFirstAndLast.replace(/\^/g, ' ');
+
+  // Trim any extraneous whitespace
+  return cleaned.trim();
+}
+
+/**
+ * Gets compression type
+ *
+ * @param {number} imageId
+ * @returns {string} compression type.
+ */
+function getCompression(imageId) {
+  const generalImageModule = cornerstone.metaData.get('generalImageModule', imageId) || {};
+  const {
+    lossyImageCompression,
+    lossyImageCompressionRatio,
+    lossyImageCompressionMethod
+  } = generalImageModule;
+  if (lossyImageCompression === '01' && lossyImageCompressionRatio !== '') {
+    const compressionMethod = lossyImageCompressionMethod || 'Lossy: ';
+    const compressionRatio = utils_formatNumberPrecision(lossyImageCompressionRatio, 2);
+    return compressionMethod + compressionRatio + ' : 1';
+  }
+  return 'Lossless / Uncompressed';
+}
+;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/components/ViewportOverlay/index.tsx
+
+
+
+
+
+/**
+ *
+ * @param {*} config is a configuration object that defines four lists of elements,
+ * one topLeft, topRight, bottomLeft, bottomRight contents.
+ * @param {*} extensionManager is used to load the image data.
+ * @returns
+ */
+const generateFromConfig = ({
+  topLeft = [],
+  topRight = [],
+  bottomLeft = [],
+  bottomRight = [],
+  itemGenerator = () => {}
+}) => {
+  return props => {
+    const topLeftClass = 'top-viewport left-viewport text-primary-light';
+    const topRightClass = 'top-viewport right-viewport-scrollbar text-primary-light';
+    const bottomRightClass = 'bottom-viewport right-viewport-scrollbar text-primary-light';
+    const bottomLeftClass = 'bottom-viewport left-viewport text-primary-light';
+    const overlay = 'absolute pointer-events-none microscopy-viewport-overlay';
+    return /*#__PURE__*/react.createElement(react.Fragment, null, topLeft && topLeft.length > 0 && /*#__PURE__*/react.createElement("div", {
+      "data-cy": 'viewport-overlay-top-left',
+      className: classnames_default()(overlay, topLeftClass)
+    }, ViewportOverlay_listComponentGenerator({
+      ...props,
+      list: topLeft,
+      itemGenerator
+    })), topRight && topRight.length > 0 && /*#__PURE__*/react.createElement("div", {
+      "data-cy": 'viewport-overlay-top-right',
+      className: classnames_default()(overlay, topRightClass)
+    }, ViewportOverlay_listComponentGenerator({
+      ...props,
+      list: topRight,
+      itemGenerator
+    })), bottomRight && bottomRight.length > 0 && /*#__PURE__*/react.createElement("div", {
+      "data-cy": 'viewport-overlay-bottom-right',
+      className: classnames_default()(overlay, bottomRightClass)
+    }, ViewportOverlay_listComponentGenerator({
+      ...props,
+      list: bottomRight,
+      itemGenerator
+    })), bottomLeft && bottomLeft.length > 0 && /*#__PURE__*/react.createElement("div", {
+      "data-cy": 'viewport-overlay-bottom-left',
+      className: classnames_default()(overlay, bottomLeftClass)
+    }, ViewportOverlay_listComponentGenerator({
+      ...props,
+      list: bottomLeft,
+      itemGenerator
+    })));
+  };
+};
+const itemGenerator = props => {
+  const {
+    item
+  } = props;
+  const {
+    title,
+    value: valueFunc,
+    condition,
+    contents
+  } = item;
+  props.image = {
+    ...props.image,
+    ...props.metadata
+  };
+  props.formatDate = formatDICOMDate;
+  props.formatTime = formatDICOMTime;
+  props.formatPN = formatPN;
+  props.formatNumberPrecision = formatNumberPrecision;
+  if (condition && !condition(props)) {
+    return null;
+  }
+  if (!contents && !valueFunc) {
+    return null;
+  }
+  const value = valueFunc && valueFunc(props);
+  const contentsValue = contents && contents(props) || [{
+    className: 'mr-1',
+    value: title
+  }, {
+    classname: 'mr-1 font-light',
+    value
+  }];
+  return /*#__PURE__*/React.createElement("div", {
+    key: item.id,
+    className: "flex flex-row"
+  }, contentsValue.map((content, idx) => /*#__PURE__*/React.createElement("span", {
+    key: idx,
+    className: content.className
+  }, content.value)));
+};
+/* harmony default export */ const ViewportOverlay = (generateFromConfig({}));
+// EXTERNAL MODULE: ../../core/src/index.ts + 72 modules
+var core_src = __webpack_require__(63810);
+// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 93 modules
+var default_src = __webpack_require__(32281);
+;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/utils/dicomWebClient.ts
+
+
+
+/**
+ * create a DICOMwebClient object to be used by Dicom Microscopy Viewer
+ *
+ * Referenced the code from `/extensions/default/src/DicomWebDataSource/index.js`
+ *
+ * @param param0
+ * @returns
+ */
+function getDicomWebClient({
+  extensionManager,
+  servicesManager
+}) {
+  const dataSourceConfig = window.config.dataSources.find(ds => ds.sourceName === extensionManager.activeDataSource);
+  const {
+    userAuthenticationService
+  } = servicesManager.services;
+  const {
+    wadoRoot,
+    staticWado,
+    singlepart
+  } = dataSourceConfig.configuration;
+  const wadoConfig = {
+    url: wadoRoot || '/dicomlocal',
+    staticWado,
+    singlepart,
+    headers: userAuthenticationService.getAuthorizationHeader(),
+    errorInterceptor: core_src/* errorHandler */.Po.getHTTPErrorHandler()
+  };
+  const client = new default_src.StaticWadoClient(wadoConfig);
+  client.wadoURL = wadoConfig.url;
+  if (extensionManager.activeDataSource === 'dicomlocal') {
+    /**
+     * For local data source, override the retrieveInstanceFrames() method of the
+     * dicomweb-client to retrieve image data from memory cached metadata.
+     * Other methods of the client doesn't matter, as we are feeding the DMV
+     * with the series metadata already.
+     *
+     * @param {Object} options
+     * @param {String} options.studyInstanceUID - Study Instance UID
+     * @param {String} options.seriesInstanceUID - Series Instance UID
+     * @param {String} options.sopInstanceUID - SOP Instance UID
+     * @param {String} options.frameNumbers - One-based indices of Frame Items
+     * @param {Object} [options.queryParams] - HTTP query parameters
+     * @returns {ArrayBuffer[]} Rendered Frame Items as byte arrays
+     */
+    //
+    client.retrieveInstanceFrames = async options => {
+      if (!('studyInstanceUID' in options)) {
+        throw new Error('Study Instance UID is required for retrieval of instance frames');
+      }
+      if (!('seriesInstanceUID' in options)) {
+        throw new Error('Series Instance UID is required for retrieval of instance frames');
+      }
+      if (!('sopInstanceUID' in options)) {
+        throw new Error('SOP Instance UID is required for retrieval of instance frames');
+      }
+      if (!('frameNumbers' in options)) {
+        throw new Error('frame numbers are required for retrieval of instance frames');
+      }
+      console.log(`retrieve frames ${options.frameNumbers.toString()} of instance ${options.sopInstanceUID}`);
+      const instance = core_src.DicomMetadataStore.getInstance(options.studyInstanceUID, options.seriesInstanceUID, options.sopInstanceUID);
+      const frameNumbers = Array.isArray(options.frameNumbers) ? options.frameNumbers : options.frameNumbers.split(',');
+      return frameNumbers.map(fr => Array.isArray(instance.PixelData) ? instance.PixelData[+fr - 1] : instance.PixelData);
+    };
+  }
+  return client;
+}
+// EXTERNAL MODULE: ../../../node_modules/dcmjs/build/dcmjs.es.js
+var dcmjs_es = __webpack_require__(67540);
+;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/utils/cleanDenaturalizedDataset.ts
+
+function isPrimitive(v) {
+  return !(typeof v == 'object' || Array.isArray(v));
+}
+const vrNumerics = ['DS', 'FL', 'FD', 'IS', 'OD', 'OF', 'OL', 'OV', 'SL', 'SS', 'SV', 'UL', 'US', 'UV'];
+
+/**
+ * Specialized for DICOM JSON format dataset cleaning.
+ * @param obj
+ * @returns
+ */
+function cleanDenaturalizedDataset(obj, options) {
+  if (Array.isArray(obj)) {
+    const newAry = obj.map(o => isPrimitive(o) ? o : cleanDenaturalizedDataset(o, options));
+    return newAry;
+  } else if (isPrimitive(obj)) {
+    return obj;
+  } else {
+    Object.keys(obj).forEach(key => {
+      if (obj[key].Value === null && obj[key].vr) {
+        delete obj[key].Value;
+      } else if (Array.isArray(obj[key].Value) && obj[key].vr) {
+        if (obj[key].Value.length === 1 && obj[key].Value[0].BulkDataURI) {
+          default_src.dicomWebUtils.fixBulkDataURI(obj[key].Value[0], options, options.dataSourceConfig);
+          obj[key].BulkDataURI = obj[key].Value[0].BulkDataURI;
+
+          // prevent mixed-content blockage
+          if (window.location.protocol === 'https:' && obj[key].BulkDataURI.startsWith('http:')) {
+            obj[key].BulkDataURI = obj[key].BulkDataURI.replace('http:', 'https:');
+          }
+          delete obj[key].Value;
+        } else if (vrNumerics.includes(obj[key].vr)) {
+          obj[key].Value = obj[key].Value.map(v => +v);
+        } else {
+          obj[key].Value = obj[key].Value.map(entry => cleanDenaturalizedDataset(entry, options));
+        }
+      }
+    });
+    return obj;
+  }
+}
+;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx
+
+
+
+
+
+
+
+
+class DicomMicroscopyViewport extends react.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null,
+      isLoaded: false
+    };
+    this.microscopyService = void 0;
+    this.viewer = null;
+    // dicom-microscopy-viewer instance
+    this.managedViewer = null;
+    // managed wrapper of microscopy-dicom extension
+    this.container = /*#__PURE__*/react.createRef();
+    this.overlayElement = /*#__PURE__*/react.createRef();
+    this.setViewportActiveHandler = () => {
+      const {
+        setViewportActive,
+        viewportId,
+        activeViewportId
+      } = this.props;
+      if (viewportId !== activeViewportId) {
+        setViewportActive(viewportId);
+      }
+    };
+    const {
+      microscopyService
+    } = this.props.servicesManager.services;
+    this.microscopyService = microscopyService;
+  }
+  /**
+   * Need to return this as a function to prevent webpack from munging it.
+   */
+  static getImportPath() {
+    return '/dicom-microscopy-viewer/dicomMicroscopyViewer.min.js';
+  }
+
+  /**
+   * Get the nearest ROI from the mouse click point
+   *
+   * @param event
+   * @param autoselect
+   * @returns
+   */
+  getNearbyROI(event, autoselect = true) {
+    const symbols = Object.getOwnPropertySymbols(this.viewer);
+    const _drawingSource = symbols.find(p => p.description === 'drawingSource');
+    const _pyramid = symbols.find(p => p.description === 'pyramid');
+    const _map = symbols.find(p => p.description === 'map');
+    const _affine = symbols.find(p => p.description === 'affine');
+    const feature = this.viewer[_drawingSource].getClosestFeatureToCoordinate(this.viewer[_map].getEventCoordinate(event));
+    if (!feature) {
+      return null;
+    }
+    const roiAnnotation = this.viewer._getROIFromFeature(feature, this.viewer[_pyramid].metadata, this.viewer[_affine]);
+    if (roiAnnotation && autoselect) {
+      this.microscopyService.selectAnnotation(roiAnnotation);
+    }
+    return roiAnnotation;
+  }
+
+  // install the microscopy renderer into the web page.
+  // you should only do this once.
+  async installOpenLayersRenderer(container, displaySet) {
+    const loadViewer = async metadata => {
+      await import( /* webpackIgnore: true */DicomMicroscopyViewport.getImportPath());
+      const {
+        viewer: DicomMicroscopyViewer,
+        metadata: metadataUtils
+      } = window.dicomMicroscopyViewer;
+      const microscopyViewer = DicomMicroscopyViewer.VolumeImageViewer;
+      const client = getDicomWebClient({
+        extensionManager: this.props.extensionManager,
+        servicesManager: this.props.servicesManager
+      });
+
+      // Parse, format, and filter metadata
+      const volumeImages = [];
+
+      /**
+       * This block of code is the original way of loading DICOM into dicom-microscopy-viewer
+       * as in their documentation.
+       * But we have the metadata already loaded by our loaders.
+       * As the metadata for microscopy DIOM files tends to be big and we don't
+       * want to double load it, below we have the mechanism to reconstruct the
+       * DICOM JSON structure (denaturalized) from naturalized metadata.
+       * (NOTE: Our loaders cache only naturalized metadata, not the denaturalized.)
+       */
+      // {
+      //   const retrieveOptions = {
+      //     studyInstanceUID: metadata[0].StudyInstanceUID,
+      //     seriesInstanceUID: metadata[0].SeriesInstanceUID,
+      //   };
+      //   metadata = await client.retrieveSeriesMetadata(retrieveOptions);
+      //   // Parse, format, and filter metadata
+      //   metadata.forEach(m => {
+      //     if (
+      //       volumeImages.length > 0 &&
+      //       m['00200052'].Value[0] != volumeImages[0].FrameOfReferenceUID
+      //     ) {
+      //       console.warn(
+      //         'Expected FrameOfReferenceUID of difference instances within a series to be the same, found multiple different values',
+      //         m['00200052'].Value[0]
+      //       );
+      //       m['00200052'].Value[0] = volumeImages[0].FrameOfReferenceUID;
+      //     }
+      //     NOTE: depending on different data source, image.ImageType sometimes
+      //     is a string, not a string array.
+      //     m['00080008'] = transformImageTypeUnnaturalized(m['00080008']);
+
+      //     const image = new metadataUtils.VLWholeSlideMicroscopyImage({
+      //       metadata: m,
+      //     });
+      //     const imageFlavor = image.ImageType[2];
+      //     if (imageFlavor === 'VOLUME' || imageFlavor === 'THUMBNAIL') {
+      //       volumeImages.push(image);
+      //     }
+      //   });
+      // }
+
+      metadata.forEach(m => {
+        // NOTE: depending on different data source, image.ImageType sometimes
+        //    is a string, not a string array.
+        m.ImageType = typeof m.ImageType === 'string' ? m.ImageType.split('\\') : m.ImageType;
+        const inst = cleanDenaturalizedDataset(dcmjs_es["default"].data.DicomMetaDictionary.denaturalizeDataset(m), {
+          StudyInstanceUID: m.StudyInstanceUID,
+          SeriesInstanceUID: m.SeriesInstanceUID,
+          dataSourceConfig: this.props.dataSource.getConfig()
+        });
+        if (!inst['00480105']) {
+          // Optical Path Sequence, no OpticalPathIdentifier?
+          // NOTE: this is actually a not-well formatted DICOM VL Whole Slide Microscopy Image.
+          inst['00480105'] = {
+            vr: 'SQ',
+            Value: [{
+              '00480106': {
+                vr: 'SH',
+                Value: ['1']
+              }
+            }]
+          };
+        }
+        const image = new metadataUtils.VLWholeSlideMicroscopyImage({
+          metadata: inst
+        });
+        const imageFlavor = image.ImageType[2];
+        if (imageFlavor === 'VOLUME' || imageFlavor === 'THUMBNAIL') {
+          volumeImages.push(image);
+        }
+      });
+
+      // format metadata for microscopy-viewer
+      const options = {
+        client,
+        metadata: volumeImages,
+        retrieveRendered: false,
+        controls: ['overview', 'position']
+      };
+      this.viewer = new microscopyViewer(options);
+      if (this.overlayElement && this.overlayElement.current && this.viewer.addViewportOverlay) {
+        this.viewer.addViewportOverlay({
+          element: this.overlayElement.current,
+          coordinates: [0, 0],
+          // TODO: dicom-microscopy-viewer documentation says this can be false to be automatically, but it is not.
+          navigate: true,
+          className: 'OpenLayersOverlay'
+        });
+      }
+      this.viewer.render({
+        container
+      });
+      const {
+        StudyInstanceUID,
+        SeriesInstanceUID
+      } = displaySet;
+      this.managedViewer = this.microscopyService.addViewer(this.viewer, this.props.viewportId, container, StudyInstanceUID, SeriesInstanceUID);
+      this.managedViewer.addContextMenuCallback(event => {
+        // TODO: refactor this after Bill's changes on ContextMenu feature get merged
+        // const roiAnnotationNearBy = this.getNearbyROI(event);
+      });
+    };
+    this.microscopyService.clearAnnotations();
+    let smDisplaySet = displaySet;
+    if (displaySet.Modality === 'SR') {
+      // for SR displaySet, let's load the actual image displaySet
+      smDisplaySet = displaySet.getSourceDisplaySet();
+    }
+    console.log('Loading viewer metadata', smDisplaySet);
+    await loadViewer(smDisplaySet.others);
+    if (displaySet.Modality === 'SR') {
+      displaySet.load(smDisplaySet);
+    }
+  }
+  componentDidMount() {
+    const {
+      displaySets,
+      viewportOptions
+    } = this.props;
+    // Todo-rename: this is always getting the 0
+    const displaySet = displaySets[0];
+    this.installOpenLayersRenderer(this.container.current, displaySet).then(() => {
+      this.setState({
+        isLoaded: true
+      });
+    });
+  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.managedViewer && prevProps.displaySets !== this.props.displaySets) {
+      const {
+        displaySets
+      } = this.props;
+      const displaySet = displaySets[0];
+      this.microscopyService.clearAnnotations();
+
+      // loading SR
+      if (displaySet.Modality === 'SR') {
+        const referencedDisplaySet = displaySet.getSourceDisplaySet();
+        displaySet.load(referencedDisplaySet);
+      }
+    }
+  }
+  componentWillUnmount() {
+    this.microscopyService.removeViewer(this.viewer);
+  }
+  render() {
+    const style = {
+      width: '100%',
+      height: '100%'
+    };
+    const displaySet = this.props.displaySets[0];
+    const firstInstance = displaySet.firstInstance || displaySet.instance;
+    return /*#__PURE__*/react.createElement("div", {
+      className: 'DicomMicroscopyViewer',
+      style: style,
+      onClick: this.setViewportActiveHandler
+    }, /*#__PURE__*/react.createElement("div", {
+      style: {
+        ...style,
+        display: 'none'
+      }
+    }, /*#__PURE__*/react.createElement("div", {
+      style: {
+        ...style
+      },
+      ref: this.overlayElement
+    }, /*#__PURE__*/react.createElement("div", {
+      style: {
+        position: 'relative',
+        height: '100%',
+        width: '100%'
+      }
+    }, displaySet && firstInstance.imageId && /*#__PURE__*/react.createElement(ViewportOverlay, {
+      displaySet: displaySet,
+      instance: displaySet.instance,
+      metadata: displaySet.metadata
+    })))), this.state.error ? /*#__PURE__*/react.createElement("h2", null, JSON.stringify(this.state.error)) : /*#__PURE__*/react.createElement("div", {
+      style: style,
+      ref: ref => {
+        this.container.current = ref;
+        this.props.resizeRef.current = ref;
+      }
+    }), this.state.isLoaded ? null : /*#__PURE__*/react.createElement(src/* LoadingIndicatorProgress */.LE, {
+      className: 'h-full w-full bg-black'
+    }));
+  }
+}
+DicomMicroscopyViewport.propTypes = {
+  viewportData: (prop_types_default()).object,
+  activeViewportId: (prop_types_default()).string,
+  setViewportActive: (prop_types_default()).func,
+  // props from OHIF Viewport Grid
+  displaySets: (prop_types_default()).array,
+  viewportId: (prop_types_default()).string,
+  viewportLabel: (prop_types_default()).string,
+  dataSource: (prop_types_default()).object,
+  viewportOptions: (prop_types_default()).object,
+  displaySetOptions: (prop_types_default()).array,
+  // other props from wrapping component
+  servicesManager: (prop_types_default()).object,
+  extensionManager: (prop_types_default()).object,
+  commandsManager: (prop_types_default()).object,
+  resizeRef: prop_types_default().oneOfType([(prop_types_default()).func, prop_types_default().shape({
+    current: (prop_types_default()).any
+  })])
+};
+/* harmony default export */ const src_DicomMicroscopyViewport = (DicomMicroscopyViewport);
+
+/***/ }),
+
+/***/ 82065:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -13,21 +679,21 @@ __webpack_require__.d(__webpack_exports__, {
 });
 
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/package.json
-const package_namespaceObject = /*#__PURE__*/JSON.parse('{"UU":"@ohif/extension-dicom-microscopy"}');
+const package_namespaceObject = JSON.parse('{"u2":"@ohif/extension-dicom-microscopy"}');
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/id.js
 
-const id = package_namespaceObject.UU;
+const id = package_namespaceObject.u2;
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
-var react = __webpack_require__(41766);
-// EXTERNAL MODULE: ../../ui/src/index.js + 782 modules
-var src = __webpack_require__(79047);
+var react = __webpack_require__(43001);
+// EXTERNAL MODULE: ../../ui/src/index.js + 784 modules
+var src = __webpack_require__(38604);
 // EXTERNAL MODULE: ../../core/src/index.ts + 72 modules
-var core_src = __webpack_require__(75186);
+var core_src = __webpack_require__(63810);
 // EXTERNAL MODULE: ../../../node_modules/react-i18next/dist/es/index.js + 15 modules
-var es = __webpack_require__(80619);
-// EXTERNAL MODULE: ../../../node_modules/mathjs/lib/esm/index.js + 996 modules
-var esm = __webpack_require__(23109);
+var es = __webpack_require__(69190);
+// EXTERNAL MODULE: ../../../node_modules/mathjs/lib/esm/index.js + 1003 modules
+var esm = __webpack_require__(5931);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/utils/coordinateFormatScoord3d2Geometry.js
 
 
@@ -117,9 +783,9 @@ function mapSlideCoord2PixelCoord(options) {
   }
   const point = options.point;
   const m = [[orientation[0] * spacing[1], orientation[3] * spacing[0], offset[0]], [orientation[1] * spacing[1], orientation[4] * spacing[0], offset[1]], [0, 0, 1]];
-  const mInverted = (0,esm/* inv */.WCD)(m);
+  const mInverted = (0,esm/* inv */.JBn)(m);
   const vSlide = [[point[0]], [point[1]], [1]];
-  const vImage = (0,esm/* multiply */.lwT)(mInverted, vSlide);
+  const vImage = (0,esm/* multiply */.JpY)(mInverted, vSlide);
   const row = Number(vImage[1][0].toFixed(4));
   const col = Number(vImage[0][0].toFixed(4));
   return [col, row];
@@ -212,7 +878,7 @@ const EVENTS = {
  * ViewerManager encapsulates the complexity of the third-party viewer and
  * expose only the features/behaviors that are relevant to the application
  */
-class ViewerManager extends core_src/* PubSubService */.Rc {
+class ViewerManager extends core_src/* PubSubService */.hC {
   constructor(viewer, viewportId, container, studyInstanceUID, seriesInstanceUID) {
     super(EVENTS);
     this.viewer = viewer;
@@ -615,7 +1281,7 @@ const RoiAnnotation_EVENTS = {
 /**
  * Represents a single annotation for the Microscopy Viewer
  */
-class RoiAnnotation extends core_src/* PubSubService */.Rc {
+class RoiAnnotation extends core_src/* PubSubService */.hC {
   constructor(roiGraphic, studyInstanceUID, seriesInstanceUID, label = '', viewState = null) {
     super(RoiAnnotation_EVENTS);
     this.uid = roiGraphic.uid;
@@ -786,7 +1452,7 @@ const MicroscopyService_EVENTS = {
  * viewers and handle their ROI graphics to create, remove and modify the
  * ROI annotations relevant to the application
  */
-class MicroscopyService extends core_src/* PubSubService */.Rc {
+class MicroscopyService extends core_src/* PubSubService */.hC {
   constructor(servicesManager) {
     super(MicroscopyService_EVENTS);
     this.servicesManager = void 0;
@@ -1373,7 +2039,7 @@ MicroscopyService.REGISTRATION = servicesManager => {
 };
 
 // EXTERNAL MODULE: ../../../node_modules/dcmjs/build/dcmjs.es.js
-var dcmjs_es = __webpack_require__(31426);
+var dcmjs_es = __webpack_require__(67540);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/utils/callInputDialog.tsx
 
 
@@ -1416,7 +2082,7 @@ function callInputDialog({
       centralize: true,
       isDraggable: false,
       showOverlay: true,
-      content: src/* Dialog */.lG,
+      content: src/* Dialog */.Vq,
       contentProps: {
         title: title,
         value: {
@@ -1429,18 +2095,18 @@ function callInputDialog({
         actions: [{
           id: 'cancel',
           text: 'Cancel',
-          type: src/* ButtonEnums.type */.Ny.NW.secondary
+          type: src/* ButtonEnums.type */.LZ.dt.secondary
         }, {
           id: 'save',
           text: 'Save',
-          type: src/* ButtonEnums.type */.Ny.NW.primary
+          type: src/* ButtonEnums.type */.LZ.dt.primary
         }],
         onSubmit: onSubmitHandler,
         body: ({
           value,
           setValue
         }) => {
-          return /*#__PURE__*/react.createElement(src/* Input */.pd, {
+          return /*#__PURE__*/react.createElement(src/* Input */.II, {
             label: "Enter your annotation",
             labelClassName: "text-white text-[14px] leading-[1.2]",
             autoFocus: true,
@@ -1503,34 +2169,34 @@ function constructSR(metadata, {
   } = metadata;
 
   // construct Comprehensive3DSR dataset
-  const observationContext = new dcmjs_es/* default.sr */.Ay.sr.templates.ObservationContext({
-    observerPersonContext: new dcmjs_es/* default.sr */.Ay.sr.templates.ObserverContext({
-      observerType: new dcmjs_es/* default.sr */.Ay.sr.coding.CodedConcept({
+  const observationContext = new dcmjs_es["default"].sr.templates.ObservationContext({
+    observerPersonContext: new dcmjs_es["default"].sr.templates.ObserverContext({
+      observerType: new dcmjs_es["default"].sr.coding.CodedConcept({
         value: '121006',
         schemeDesignator: 'DCM',
         meaning: 'Person'
       }),
-      observerIdentifyingAttributes: new dcmjs_es/* default.sr */.Ay.sr.templates.PersonObserverIdentifyingAttributes({
+      observerIdentifyingAttributes: new dcmjs_es["default"].sr.templates.PersonObserverIdentifyingAttributes({
         name: '@ohif/extension-dicom-microscopy'
       })
     }),
-    observerDeviceContext: new dcmjs_es/* default.sr */.Ay.sr.templates.ObserverContext({
-      observerType: new dcmjs_es/* default.sr */.Ay.sr.coding.CodedConcept({
+    observerDeviceContext: new dcmjs_es["default"].sr.templates.ObserverContext({
+      observerType: new dcmjs_es["default"].sr.coding.CodedConcept({
         value: '121007',
         schemeDesignator: 'DCM',
         meaning: 'Device'
       }),
-      observerIdentifyingAttributes: new dcmjs_es/* default.sr */.Ay.sr.templates.DeviceObserverIdentifyingAttributes({
+      observerIdentifyingAttributes: new dcmjs_es["default"].sr.templates.DeviceObserverIdentifyingAttributes({
         uid: DEVICE_OBSERVER_UID
       })
     }),
-    subjectContext: new dcmjs_es/* default.sr */.Ay.sr.templates.SubjectContext({
-      subjectClass: new dcmjs_es/* default.sr */.Ay.sr.coding.CodedConcept({
+    subjectContext: new dcmjs_es["default"].sr.templates.SubjectContext({
+      subjectClass: new dcmjs_es["default"].sr.coding.CodedConcept({
         value: '121027',
         schemeDesignator: 'DCM',
         meaning: 'Specimen'
       }),
-      subjectClassSpecificContext: new dcmjs_es/* default.sr */.Ay.sr.templates.SubjectContextSpecimen({
+      subjectClassSpecificContext: new dcmjs_es["default"].sr.templates.SubjectContextSpecimen({
         uid: SpecimenDescriptionSequence.SpecimenUID,
         identifier: SpecimenDescriptionSequence.SpecimenIdentifier || metadata.SeriesInstanceUID,
         containerIdentifier: metadata.ContainerIdentifier || metadata.SeriesInstanceUID
@@ -1562,14 +2228,14 @@ function constructSR(metadata, {
       const ConceptName = Array.isArray(measurement.ConceptNameCodeSequence) ? measurement.ConceptNameCodeSequence[0] : measurement.ConceptNameCodeSequence;
       const MeasuredValue = Array.isArray(measurement.MeasuredValueSequence) ? measurement.MeasuredValueSequence[0] : measurement.MeasuredValueSequence;
       const MeasuredValueUnits = Array.isArray(MeasuredValue.MeasurementUnitsCodeSequence) ? MeasuredValue.MeasurementUnitsCodeSequence[0] : MeasuredValue.MeasurementUnitsCodeSequence;
-      return new dcmjs_es/* default.sr */.Ay.sr.valueTypes.NumContentItem({
-        name: new dcmjs_es/* default.sr */.Ay.sr.coding.CodedConcept({
+      return new dcmjs_es["default"].sr.valueTypes.NumContentItem({
+        name: new dcmjs_es["default"].sr.coding.CodedConcept({
           meaning: ConceptName.CodeMeaning,
           value: ConceptName.CodeValue,
           schemeDesignator: ConceptName.CodingSchemeDesignator
         }),
         value: MeasuredValue.NumericValue,
-        unit: new dcmjs_es/* default.sr */.Ay.sr.coding.CodedConcept({
+        unit: new dcmjs_es["default"].sr.coding.CodedConcept({
           value: MeasuredValueUnits.CodeValue,
           meaning: MeasuredValueUnits.CodeMeaning,
           schemeDesignator: MeasuredValueUnits.CodingSchemeDesignator
@@ -1580,8 +2246,8 @@ function constructSR(metadata, {
     /** Avoid incompatibility with dcmjs */
     evaluations = evaluations.map(evaluation => {
       const ConceptName = Array.isArray(evaluation.ConceptNameCodeSequence) ? evaluation.ConceptNameCodeSequence[0] : evaluation.ConceptNameCodeSequence;
-      return new dcmjs_es/* default.sr */.Ay.sr.valueTypes.TextContentItem({
-        name: new dcmjs_es/* default.sr */.Ay.sr.coding.CodedConcept({
+      return new dcmjs_es["default"].sr.valueTypes.TextContentItem({
+        name: new dcmjs_es["default"].sr.coding.CodedConcept({
           value: ConceptName.CodeValue,
           meaning: ConceptName.CodeMeaning,
           schemeDesignator: ConceptName.CodingSchemeDesignator
@@ -1591,17 +2257,17 @@ function constructSR(metadata, {
       });
     });
     const identifier = `ROI #${i + 1}`;
-    const group = new dcmjs_es/* default.sr */.Ay.sr.templates.PlanarROIMeasurementsAndQualitativeEvaluations({
-      trackingIdentifier: new dcmjs_es/* default.sr */.Ay.sr.templates.TrackingIdentifier({
+    const group = new dcmjs_es["default"].sr.templates.PlanarROIMeasurementsAndQualitativeEvaluations({
+      trackingIdentifier: new dcmjs_es["default"].sr.templates.TrackingIdentifier({
         uid: roi.uid,
         identifier: presentationState ? identifier.concat(`(${JSON.stringify(presentationState)})`) : identifier
       }),
-      referencedRegion: new dcmjs_es/* default.sr */.Ay.sr.contentItems.ImageRegion3D({
+      referencedRegion: new dcmjs_es["default"].sr.contentItems.ImageRegion3D({
         graphicType: roi.scoord3d.graphicType,
         graphicData: roi.scoord3d.graphicData,
         frameOfReferenceUID: roi.scoord3d.frameOfReferenceUID
       }),
-      findingType: new dcmjs_es/* default.sr */.Ay.sr.coding.CodedConcept({
+      findingType: new dcmjs_es["default"].sr.coding.CodedConcept({
         value: label,
         schemeDesignator: '@ohif/extension-dicom-microscopy',
         meaning: 'FREETEXT'
@@ -1612,23 +2278,23 @@ function constructSR(metadata, {
     });
     imagingMeasurements.push(...group);
   }
-  const measurementReport = new dcmjs_es/* default.sr */.Ay.sr.templates.MeasurementReport({
-    languageOfContentItemAndDescendants: new dcmjs_es/* default.sr */.Ay.sr.templates.LanguageOfContentItemAndDescendants({}),
+  const measurementReport = new dcmjs_es["default"].sr.templates.MeasurementReport({
+    languageOfContentItemAndDescendants: new dcmjs_es["default"].sr.templates.LanguageOfContentItemAndDescendants({}),
     observationContext,
-    procedureReported: new dcmjs_es/* default.sr */.Ay.sr.coding.CodedConcept({
+    procedureReported: new dcmjs_es["default"].sr.coding.CodedConcept({
       value: '112703',
       schemeDesignator: 'DCM',
       meaning: 'Whole Slide Imaging'
     }),
     imagingMeasurements
   });
-  const dataset = new dcmjs_es/* default.sr */.Ay.sr.documents.Comprehensive3DSR({
+  const dataset = new dcmjs_es["default"].sr.documents.Comprehensive3DSR({
     content: measurementReport[0],
     evidence: [metadata],
-    seriesInstanceUID: dcmjs_es/* default.data */.Ay.data.DicomMetaDictionary.uid(),
+    seriesInstanceUID: dcmjs_es["default"].data.DicomMetaDictionary.uid(),
     seriesNumber: SeriesNumber,
     seriesDescription: SeriesDescription || 'Whole slide imaging structured report',
-    sopInstanceUID: dcmjs_es/* default.data */.Ay.data.DicomMetaDictionary.uid(),
+    sopInstanceUID: dcmjs_es["default"].data.DicomMetaDictionary.uid(),
     instanceNumber: 1,
     manufacturer: 'dcmjs-org'
   });
@@ -1648,7 +2314,7 @@ function constructSR(metadata, {
       vr: 'UI'
     },
     ImplementationClassUID: {
-      Value: [dcmjs_es/* default.data */.Ay.data.DicomMetaDictionary.uid()],
+      Value: [dcmjs_es["default"].data.DicomMetaDictionary.uid()],
       vr: 'UI'
     },
     ImplementationVersionName: {
@@ -1686,7 +2352,7 @@ function saveByteArray(buffer, filename) {
 let saving = false;
 const {
   datasetToBuffer
-} = dcmjs_es/* default.data */.Ay.data;
+} = dcmjs_es["default"].data;
 const formatArea = area => {
   let mult = 1;
   let unit = 'mm';
@@ -1995,7 +2661,7 @@ function MicroscopyPanel(props) {
   return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
     className: "ohif-scrollbar overflow-y-auto overflow-x-hidden",
     "data-cy": 'measurements-panel'
-  }, /*#__PURE__*/react.createElement(src/* MeasurementTable */.V, {
+  }, /*#__PURE__*/react.createElement(src/* MeasurementTable */.wt, {
     title: "Measurements",
     servicesManager: props.servicesManager,
     data: data,
@@ -2004,7 +2670,7 @@ function MicroscopyPanel(props) {
     onDelete: onMeasurementDeleteHandler
   })));
 }
-const connectedMicroscopyPanel = (0,es/* withTranslation */.CI)(['MicroscopyTable', 'Common'])(MicroscopyPanel);
+const connectedMicroscopyPanel = (0,es/* withTranslation */.Zh)(['MicroscopyTable', 'Common'])(MicroscopyPanel);
 /* harmony default export */ const MicroscopyPanel_MicroscopyPanel = (connectedMicroscopyPanel);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/getPanelModule.tsx
 
@@ -2025,7 +2691,7 @@ function getPanelModule({
     const [{
       activeViewportId,
       viewports
-    }] = (0,src/* useViewportGrid */.ih)();
+    }] = (0,src/* useViewportGrid */.O_)();
     return /*#__PURE__*/react.createElement(MicroscopyPanel_MicroscopyPanel, {
       viewports: viewports,
       activeViewportId: activeViewportId,
@@ -2182,7 +2848,7 @@ function getCommandsModule({
 
 const {
   utils
-} = core_src/* default */.Ay;
+} = core_src["default"];
 const SOP_CLASS_UIDS = {
   VL_WHOLE_SLIDE_MICROSCOPY_IMAGE_STORAGE: '1.2.840.10008.5.1.4.1.1.77.1.6'
 };
@@ -2305,11 +2971,14 @@ const DCM_CODE_VALUES = {
 function toArray(item) {
   return Array.isArray(item) ? item : [item];
 }
-;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/utils/loadSR.js
+// EXTERNAL MODULE: ../../../extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx + 7 modules
+var DicomMicroscopyViewport = __webpack_require__(3094);
+;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/utils/loadSR.ts
+
 
 
 
-const MeasurementReport = dcmjs_es/* default.adapters */.Ay.adapters.DICOMMicroscopyViewer.MeasurementReport;
+const MeasurementReport = dcmjs_es["default"].adapters.DICOMMicroscopyViewer.MeasurementReport;
 
 // Define as async so that it returns a promise, expected by the ViewportGrid
 async function loadSR(microscopyService, microscopySRDisplaySet, referencedDisplaySet) {
@@ -2346,7 +3015,9 @@ async function loadSR(microscopyService, microscopySRDisplaySet, referencedDispl
 async function _getROIsFromToolState(naturalizedDataset, FrameOfReferenceUID) {
   const toolState = MeasurementReport.generateToolState(naturalizedDataset);
   const tools = Object.getOwnPropertyNames(toolState);
-  const DICOMMicroscopyViewer = await __webpack_require__.e(/* import() | dicom-microscopy-viewer */ 525).then(__webpack_require__.t.bind(__webpack_require__, 95226, 23));
+  // Does a dynamic import to prevent webpack from rebuilding the library
+  await import( /* webpackIgnore: true */DicomMicroscopyViewport["default"].getImportPath());
+  const DICOMMicroscopyViewer = window.dicomMicroscopyViewer;
   const measurementGroupContentItems = _getMeasurementGroups(naturalizedDataset);
   const rois = [];
   const labels = [];
@@ -2480,7 +3151,7 @@ function getSourceDisplaySet(allDisplaySets, microscopySRDisplaySet) {
 
 const {
   utils: DicomMicroscopySRSopClassHandler_utils
-} = core_src/* default */.Ay;
+} = core_src["default"];
 const DicomMicroscopySRSopClassHandler_SOP_CLASS_UIDS = {
   COMPREHENSIVE_3D_SR: '1.2.840.10008.5.1.4.1.1.88.34'
 };
@@ -2575,12 +3246,12 @@ function getDicomMicroscopySRSopClassHandler({
   };
 }
 // EXTERNAL MODULE: ../../../node_modules/react-resize-detector/build/index.esm.js
-var index_esm = __webpack_require__(78668);
+var index_esm = __webpack_require__(7023);
 // EXTERNAL MODULE: ../../../node_modules/lodash.debounce/index.js
-var lodash_debounce = __webpack_require__(14771);
+var lodash_debounce = __webpack_require__(8324);
 var lodash_debounce_default = /*#__PURE__*/__webpack_require__.n(lodash_debounce);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/index.tsx
-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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 
 
 
@@ -2592,7 +3263,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 const Component = /*#__PURE__*/react.lazy(() => {
-  return Promise.all(/* import() */[__webpack_require__.e(370), __webpack_require__.e(914), __webpack_require__.e(483), __webpack_require__.e(236), __webpack_require__.e(644), __webpack_require__.e(931), __webpack_require__.e(944), __webpack_require__.e(172)]).then(__webpack_require__.bind(__webpack_require__, 66921));
+  return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 3094));
 });
 const MicroscopyViewport = props => {
   return /*#__PURE__*/react.createElement(react.Suspense, {
@@ -2640,7 +3311,7 @@ const extension = {
       const {
         viewportOptions
       } = props;
-      const [viewportGrid, viewportGridService] = (0,src/* useViewportGrid */.ih)();
+      const [viewportGrid, viewportGridService] = (0,src/* useViewportGrid */.O_)();
       const {
         activeViewportId
       } = viewportGrid;
@@ -2658,7 +3329,7 @@ const extension = {
       }, 100);
       const {
         ref: resizeRef
-      } = (0,index_esm/* useResizeDetector */.u)({
+      } = (0,index_esm/* useResizeDetector */.N)({
         onResize,
         handleHeight: true,
         handleWidth: true