chore(release): publish [skip ci]

- @ohif/extension-cornerstone@2.12.13
 - @ohif/extension-debugging@0.3.3
 - @ohif/extension-dicom-html@1.3.22
 - @ohif/extension-vtk@1.12.27
 - @ohif/core@2.16.22
 - @ohif/viewer@4.12.30

.circleci/config.yml

@@ -27,7 +27,7 @@ executors:
       - image: 'cypress/browsers:node14.15.0-chrome86-ff82'
 defaults: &defaults
   docker:
-    - image: cimg/node:14.18
+    - image: cimg/node:14.19
       environment:
         TERM: xterm # Enable colors in term
         QUICK_BUILD: true
@@ -347,9 +347,8 @@ workflows:
           store_artifacts: true
           working_directory: platform/viewer
           build:
-            git submodule update --init &&
+            git submodule update --init && npx cross-env QUICK_BUILD=true
-            npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js
+            APP_CONFIG=config/e2e.js yarn run build
-            yarn run build
           start: yarn run test:e2e:serve
           spec: 'cypress/integration/common/**/*,cypress/integration/pwa/**/*'
           wait-on: 'http://localhost:3000'
@@ -376,9 +375,8 @@ workflows:
           store_artifacts: true
           working_directory: platform/viewer
           build:
-            git submodule update --init &&
+            git submodule update --init && npx cross-env QUICK_BUILD=true
-            npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js
+            APP_CONFIG=config/e2e.js yarn run build:package
-            yarn run build:package
           start: yarn run test:e2e:serve
           spec: 'cypress/integration/common/**/*,cypress/integration/script-tag/**/*'
           wait-on: 'http://localhost:3000'
@@ -410,9 +408,8 @@ workflows:
           store_artifacts: false
           working_directory: platform/viewer
           build:
-            git submodule update --init &&
+            git submodule update --init && npx cross-env QUICK_BUILD=true
-            npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js
+            APP_CONFIG=config/e2e.js yarn run build
-            yarn run build
           # start server --> verify running --> percy + chrome + cypress
           command: yarn run test:e2e:dist
           cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
@@ -490,9 +487,8 @@ workflows:
           store_artifacts: false
           working_directory: platform/viewer
           build:
-            git submodule update --init &&
+            git submodule update --init && npx cross-env QUICK_BUILD=true
-            npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js
+            APP_CONFIG=config/e2e.js yarn run build
-            yarn run build
           # start server --> verify running --> percy + chrome + cypress
           command: yarn run test:e2e:dist
           cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'

.gitignore

@@ -8,7 +8,6 @@ docs/_book
 src/version.js
 junit.xml
 coverage/
-.docz/
 *.js.map
 .yarn
 platform/docs/.docusaurus
@@ -38,4 +37,3 @@ screenshots/
 
 # Locize settings
 .locize
-

.netlify/build-deploy-preview.sh

@@ -22,16 +22,6 @@ mv platform/viewer/dist/* .netlify/www/pwa -v
 # Build && Move script output
 # yarn run build:package
 
-# Build && Move Docz Output
-# Using local yarn install to prevent Gatsby from needing to access
-# node_modules above the platform/ui folder
-cd platform/ui
-yarn install
-yarn run build
-cd ../..
-mkdir -p ./.netlify/www/ui
-mv platform/ui/.docz/dist/* .netlify/www/ui -v
-
 # Cache all of the node_module dependencies in
 # extensions, modules, and platform packages
 yarn run lerna:cache

Dockerfile

@@ -21,7 +21,7 @@
 
 # Stage 1: Build the application
 # docker build -t ohif/viewer:latest .
-FROM node:15.13.0-slim as builder
+FROM node:14-slim as builder
 
 RUN mkdir /usr/src/app
 WORKDIR /usr/src/app
@@ -42,7 +42,7 @@ COPY yarn.lock /usr/src/app/yarn.lock
 RUN apt-get update && apt-get install -y python make g++
 # Run the install before copying the rest of the files
 RUN yarn config set workspaces-experimental true
-RUN yarn install
+RUN yarn install --verbose
 
 ENV PATH /usr/src/app/node_modules/.bin:$PATH
 ENV QUICK_BUILD true

extensions/cornerstone/CHANGELOG.md

@@ -3,6 +3,54 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.12.13](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.12.12...@ohif/extension-cornerstone@2.12.13) (2022-06-30)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+## [2.12.12](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.12.11...@ohif/extension-cornerstone@2.12.12) (2022-06-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+## [2.12.11](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.12.10...@ohif/extension-cornerstone@2.12.11) (2022-06-14)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+## [2.12.10](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.12.9...@ohif/extension-cornerstone@2.12.10) (2022-04-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+## [2.12.9](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.12.8...@ohif/extension-cornerstone@2.12.9) (2022-03-25)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+## [2.12.8](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.12.7...@ohif/extension-cornerstone@2.12.8) (2022-03-14)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
 ## [2.12.7](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.12.6...@ohif/extension-cornerstone@2.12.7) (2022-02-03)
 
 **Note:** Version bump only for package @ohif/extension-cornerstone

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "2.12.7",
+  "version": "2.12.13",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "cornerstone-math": "^0.1.9",
     "cornerstone-tools": "^6.0.6",
     "cornerstone-wado-image-loader": "^4.1.0",
-    "dcmjs": "0.19.4",
+    "dcmjs": "0.19.9",
     "dicom-parser": "^1.8.11",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
@@ -44,7 +44,8 @@
     "react-dom": "^16.8.6",
     "react-redux": "^6.0.0",
     "react-resize-detector": "^3.4.0",
-    "redux": "^4.0.1"
+    "redux": "^4.0.1",
+    "styled-components": "^5.3.5"
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",

extensions/cornerstone/src/OHIFCornerstoneViewport.js

@@ -237,11 +237,21 @@ class OHIFCornerstoneViewport extends Component {
       }
     };
 
-    const warningsOverlay = props => {
+    const overlay = props => {
+      const displaySet = this.props.viewportData.displaySet;
+      let filteredSRLabels;
+      if (displaySet.SRLabels && displaySet.SRLabels.length !== 0) {
+        filteredSRLabels = displaySet.SRLabels.filter(
+          SRLabel =>
+            SRLabel.ReferencedSOPInstanceUID === displaySet.SOPInstanceUID
+        );
+      }
+
       return (
         <OHIFCornerstoneViewportOverlay
           {...props}
           inconsistencyWarnings={inconsistencyWarnings}
+          SRLabels={filteredSRLabels}
         />
       );
     };
@@ -254,7 +264,7 @@ class OHIFCornerstoneViewport extends Component {
           imageIdIndex={currentImageIdIndex}
           onNewImageDebounced={newImageHandler}
           onNewImageDebounceTime={300}
-          viewportOverlayComponent={warningsOverlay}
+          viewportOverlayComponent={overlay}
           stackPrefetch={this.props.stackPrefetch}
           isStackPrefetchEnabled={this.props.isStackPrefetchEnabled}
           // ~~ Connected (From REDUX)

extensions/cornerstone/src/components/OHIFCornerstoneViewportOverlay.css

@@ -33,6 +33,10 @@
   bottom: 140px;
   left: 20px;
 }
+.OHIFCornerstoneViewportOverlay .bottom-left3 {
+  bottom: 110px;
+  left: -20px;
+}
 .OHIFCornerstoneViewportOverlay .bottom-right {
   bottom: 20px;
   right: 20px;

extensions/cornerstone/src/components/OHIFCornerstoneViewportOverlay.js

@@ -1,5 +1,6 @@
 import { PureComponent } from 'react';
 import React from 'react';
+import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import cornerstone from 'cornerstone-core';
 import './OHIFCornerstoneViewportOverlay.css';
@@ -9,13 +10,27 @@ import {
   formatDICOMDate,
   formatDICOMTime,
   formatPN,
-  getCompression
+  getCompression,
 } from '../utils/formatStudy';
 import classNames from 'classnames';
 import { Icon } from '@ohif/ui/src/elements/Icon';
 import { Tooltip } from '@ohif/ui/src/components/tooltip';
 import { OverlayTrigger } from '@ohif/ui/src/components/overlayTrigger';
 
+const Button = styled.button`
+  color: white;
+  padding: 2px 7px;
+  border-radius: 10px;
+  outline: 0;
+  text-transform: none;
+  margin: 2px 2px;
+  cursor: pointer;
+  &:disabled {
+    cursor: default;
+    opacity: 0.9;
+  }
+`;
+
 class OHIFCornerstoneViewportOverlay extends PureComponent {
   static propTypes = {
     scale: PropTypes.number.isRequired,
@@ -30,11 +45,19 @@ class OHIFCornerstoneViewportOverlay extends PureComponent {
     imageId: PropTypes.string.isRequired,
     imageIndex: PropTypes.number.isRequired,
     stackSize: PropTypes.number.isRequired,
-    inconsistencyWarnings: PropTypes.array.isRequired
+    inconsistencyWarnings: PropTypes.array,
+    SRLabels: PropTypes.array,
   };
 
   render() {
-    const { imageId, scale, windowWidth, windowCenter, inconsistencyWarnings } = this.props;
+    const {
+      imageId,
+      scale,
+      windowWidth,
+      windowCenter,
+      inconsistencyWarnings,
+      SRLabels,
+    } = this.props;
 
     if (!imageId) {
       return null;
@@ -72,8 +95,11 @@ class OHIFCornerstoneViewportOverlay extends PureComponent {
 
     const { imageIndex, stackSize } = this.props;
 
-    const inconsistencyWarningsOn = inconsistencyWarnings && inconsistencyWarnings.length !== 0 ? true : false;
+    const inconsistencyWarningsOn =
-    const getWarningContent = (warningList) => {
+      inconsistencyWarnings && inconsistencyWarnings.length !== 0
+        ? true
+        : false;
+    const getWarningContent = warningList => {
       if (Array.isArray(warningList)) {
         const listedWarnings = warningList.map((warn, index) => {
           return <li key={index}>{warn}</li>;
@@ -86,33 +112,100 @@ class OHIFCornerstoneViewportOverlay extends PureComponent {
     };
 
     const getWarningInfo = (seriesNumber, inconsistencyWarnings) => {
-      return(
+      return (
         <React.Fragment>
-        {inconsistencyWarnings.length != 0 ? (
+          {inconsistencyWarnings.length != 0 ? (
-          <OverlayTrigger
+            <OverlayTrigger
-            key={seriesNumber}
+              key={seriesNumber}
-            placement="left"
+              placement="left"
-            overlay={
+              overlay={
-              <Tooltip
+                <Tooltip
-                placement="left"
+                  placement="left"
-                className="in tooltip-warning"
+                  className="in tooltip-warning"
-                id="tooltip-left"
+                  id="tooltip-left"
-              >
+                >
-                <div className="warningTitle">Series Inconsistencies</div>
+                  <div className="warningTitle">Series Inconsistencies</div>
-                <div className="warningContent">{getWarningContent(inconsistencyWarnings)}</div>
+                  <div className="warningContent">
-              </Tooltip>
+                    {getWarningContent(inconsistencyWarnings)}
-            }
+                  </div>
-          >
+                </Tooltip>
-            <div className={classNames('warning')}>
+              }
-              <span className="warning-icon">
+            >
-                <Icon name="exclamation-triangle" />
+              <div className={classNames('warning')}>
-              </span>
+                <span className="warning-icon">
-            </div>
+                  <Icon name="exclamation-triangle" />
-          </OverlayTrigger>
+                </span>
-        ) : (
+              </div>
-          <React.Fragment></React.Fragment>
+            </OverlayTrigger>
+          ) : (
+            <React.Fragment></React.Fragment>
           )}
-      </React.Fragment>
+        </React.Fragment>
+      );
+    };
+
+    const SRLabelsOn = SRLabels && SRLabels.length !== 0 ? true : false;
+
+    /**/
+
+    const getSRLabelsContent = SRLabels => {
+      if (Array.isArray(SRLabels)) {
+        const listedSRLabels = SRLabels.map((SRLabel, index) => {
+          const color = SRLabel.labels.color;
+          return (
+            SRLabel.labels.visible && (
+              <OverlayTrigger
+                key={index}
+                placement="top"
+                overlay={
+                  <Tooltip
+                    placement="top"
+                    className="in tooltip-warning"
+                    id="tooltip-top"
+                  >
+                    <div className="warningTitle">
+                      {' '}
+                      Coding scheme designators{' '}
+                    </div>
+                    <div className="warningContent">
+                      {SRLabel.labels.labelCodingSchemeDesignator +
+                        ' : ' +
+                        SRLabel.labels.valueCodingSchemeDesignator}
+                    </div>
+                  </Tooltip>
+                }
+              >
+                <div style={{ display: 'inline-block' }}>
+                  <Button
+                    style={{
+                      backgroundColor: color,
+                    }}
+                    disabled={true}
+                    key={index}
+                  >
+                    {SRLabel.labels.label + ' : ' + SRLabel.labels.value}
+                  </Button>
+                </div>
+              </OverlayTrigger>
+            )
+          );
+        });
+
+        return <ol>{listedSRLabels}</ol>;
+      } else {
+        return <React.Fragment></React.Fragment>;
+      }
+    };
+
+    const getSRLabelsInfo = SRLabels => {
+      return (
+        <React.Fragment>
+          {SRLabels.length != 0 ? (
+            getSRLabelsContent(SRLabels)
+          ) : (
+            <React.Fragment></React.Fragment>
+          )}
+        </React.Fragment>
       );
     };
 
@@ -134,7 +227,14 @@ class OHIFCornerstoneViewportOverlay extends PureComponent {
           <div className="compressionIndicator">{compression}</div>
         </div>
         <div className="bottom-left2 warning">
-          <div>{inconsistencyWarningsOn ? getWarningInfo(seriesNumber, inconsistencyWarnings) : ''}</div>
+          <div>
+            {inconsistencyWarningsOn
+              ? getWarningInfo(seriesNumber, inconsistencyWarnings)
+              : ''}
+          </div>
+        </div>
+        <div className="bottom-left3 warning">
+          <div>{SRLabelsOn ? getSRLabelsInfo(SRLabels) : ''}</div>
         </div>
         <div className="bottom-left overlay-element">
           <div>{seriesNumber >= 0 ? `Ser: ${seriesNumber}` : ''}</div>

extensions/cornerstone/src/tools/DICOMSRDisplayTool.js

@@ -97,6 +97,8 @@ export default class DICOMSRDisplayTool extends BaseTool {
         const renderableDataForGraphicType = renderableData[GraphicType];
 
         switch (GraphicType) {
+          case SCOORD_TYPES.TEXT:
+            break;
           case SCOORD_TYPES.POINT:
             this.renderPoint(renderableDataForGraphicType, eventData, options);
             break;
@@ -167,20 +169,22 @@ export default class DICOMSRDisplayTool extends BaseTool {
         return data.handles.textBox.anchorPoints;
       }
 
-      draw(context, context => {
+      if (data.handles.textBox.anchorPoints.length !== 0) {
-        drawLinkedTextBox(
+        draw(context, context => {
-          context,
+          drawLinkedTextBox(
-          element,
+            context,
-          data.handles.textBox,
+            element,
-          text,
+            data.handles.textBox,
-          data.handles,
+            text,
-          textBoxAnchorPoints,
+            data.handles,
-          color,
+            textBoxAnchorPoints,
-          lineWidth,
+            color,
-          0,
+            lineWidth,
-          true
+            0,
-        );
+            true
-      });
+          );
+        });
+      }
     }
 
     // TOOD -> text boxes may overlap with other annotations at the moment.
@@ -230,7 +234,6 @@ export default class DICOMSRDisplayTool extends BaseTool {
     const { element, image } = eventData;
     const { rows, columns } = image;
     const context = getNewContext(eventData.canvasContext.canvas);
-
     const { color, lineWidth } = options;
 
     // Find a suitable length for the image size.
@@ -332,6 +335,8 @@ function _getTextBoxAnchorPointsForRenderableData(renderableData, eventData) {
     const renderableDataForGraphicType = renderableData[GraphicType];
 
     switch (GraphicType) {
+      case SCOORD_TYPES.TEXT:
+        break;
       case SCOORD_TYPES.POINT:
         renderableDataForGraphicType.forEach(points => {
           anchorPoints = [...anchorPoints, ...points];
@@ -405,7 +410,7 @@ function _getBoundingBoxFromAnchorPoints(anchorPoints) {
       minX = x;
     }
 
-    if (y > maxX) {
+    if (y > maxY) {
       maxY = y;
     } else if (y < minY) {
       minY = y;

extensions/cornerstone/src/tools/constants/scoordTypes.js

@@ -1,4 +1,5 @@
 export default {
+  TEXT: 'TEXT',
   POINT: 'POINT',
   MULTIPOINT: 'MULTIPOINT',
   POLYLINE: 'POLYLINE',

extensions/debugging/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-debugging@0.3.2...@ohif/extension-debugging@0.3.3) (2022-06-30)
+
+**Note:** Version bump only for package @ohif/extension-debugging
+
+
+
+
+
 ## [0.3.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-debugging@0.3.1...@ohif/extension-debugging@0.3.2) (2022-03-10)
 
 **Note:** Version bump only for package @ohif/extension-debugging

extensions/debugging/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-debugging",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "OHIF extension for debugging.",
   "author": "OHIF",
   "license": "MIT",

extensions/debugging/src/DebugReportModal.js

@@ -89,10 +89,10 @@ const DubugReportModal = ({
 
     Object.keys(viewportSpecificData).forEach(viewportIndex => {
       const displaySet = viewportSpecificData[viewportIndex];
-      const [
+      const [referencedDisplaySetsRef] = _getReferencedSeriesInstanceUIDsString(
-        referencedDisplaySetsRef,
+        displaySet,
-        referencedDisplaySetsCount,
+        'SEG'
-      ] = _getReferencedSeriesInstanceUIDsString(displaySet, 'SEG');
+      );
 
       const [row, column] = _viewportIndexToViewportPosition(
         viewportIndex,
@@ -106,10 +106,27 @@ const DubugReportModal = ({
 
     Object.keys(viewportSpecificData).forEach(viewportIndex => {
       const displaySet = viewportSpecificData[viewportIndex];
-      const [
+      const [referencedDisplaySetsRef] = _getReferencedSeriesInstanceUIDsString(
-        referencedDisplaySetsRef,
+        displaySet,
-        referencedDisplaySetsCount,
+        'RTSTRUCT'
-      ] = _getReferencedSeriesInstanceUIDsString(displaySet, 'RTSTRUCT');
+      );
+
+      const [row, column] = _viewportIndexToViewportPosition(
+        viewportIndex,
+        numColumns
+      );
+
+      body += `[${row},${column}]\t${referencedDisplaySetsRef}\n`;
+    });
+
+    body += '== ReferencedSRSeriesInstanceUIDs ==\n';
+
+    Object.keys(viewportSpecificData).forEach(viewportIndex => {
+      const displaySet = viewportSpecificData[viewportIndex];
+      const [referencedDisplaySetsRef] = _getReferencedSeriesInstanceUIDsString(
+        displaySet,
+        'SR'
+      );
 
       const [row, column] = _viewportIndexToViewportPosition(
         viewportIndex,
@@ -261,11 +278,15 @@ const getLayout = viewports => {
       <tr>
         <th>ReferencedSEGSeriesInstanceUIDs</th>
       </tr>
-      {getReferencedSEGSeriesInstanceUIDsPerRow(viewports)}
+      {getReferencedSeriesInstanceUIDsPerRow(viewports, 'SEG')}
       <tr>
         <th>ReferencedRTSTRUCTSeriesInstanceUIDs</th>
       </tr>
-      {getReferencedRTSTRUCTSeriesInstanceUIDsPerRow(viewports)}
+      {getReferencedSeriesInstanceUIDsPerRow(viewports, 'RTSTRUCT')}
+      <tr>
+        <th>ReferencedSRSeriesInstanceUIDs</th>
+      </tr>
+      {getReferencedSeriesInstanceUIDsPerRow(viewports, 'SR')}
     </React.Fragment>
   );
 };
@@ -351,7 +372,7 @@ const _getReferencedSeriesInstanceUIDsString = (displaySet, Modality) => {
   return [referencedDisplaySetsRef, referencedDisplaySetsCount];
 };
 
-const getReferencedSEGSeriesInstanceUIDsPerRow = viewports => {
+const getReferencedSeriesInstanceUIDsPerRow = (viewports, Modality) => {
   const { viewportSpecificData, numColumns } = viewports;
 
   // NOTE viewportSpecificData is actually an object with numerical keys.
@@ -360,43 +381,7 @@ const getReferencedSEGSeriesInstanceUIDsPerRow = viewports => {
     const [
       referencedDisplaySetsRef,
       referencedDisplaySetsCount,
-    ] = _getReferencedSeriesInstanceUIDsString(displaySet, 'SEG');
+    ] = _getReferencedSeriesInstanceUIDsString(displaySet, Modality);
-
-    const [row, column] = _viewportIndexToViewportPosition(
-      viewportIndex,
-      numColumns
-    );
-
-    if (referencedDisplaySetsCount > 1) {
-      return (
-        <tr>
-          <td>{`[${row},${column}]`}</td>
-          <td className="debug-overflowText-border">
-            {referencedDisplaySetsRef}
-          </td>
-        </tr>
-      );
-    } else {
-      return (
-        <tr>
-          <td>{`[${row},${column}]`}</td>
-          <td className="debug-overflowText">{referencedDisplaySetsRef}</td>
-        </tr>
-      );
-    }
-  });
-};
-
-const getReferencedRTSTRUCTSeriesInstanceUIDsPerRow = viewports => {
-  const { viewportSpecificData, numColumns } = viewports;
-
-  // NOTE viewportSpecificData is actually an object with numerical keys.
-  return Object.keys(viewportSpecificData).map(viewportIndex => {
-    const displaySet = viewportSpecificData[viewportIndex];
-    const [
-      referencedDisplaySetsRef,
-      referencedDisplaySetsCount,
-    ] = _getReferencedSeriesInstanceUIDsString(displaySet, 'RTSTRUCT');
 
     const [row, column] = _viewportIndexToViewportPosition(
       viewportIndex,

extensions/dicom-html/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.22](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.3.21...@ohif/extension-dicom-html@1.3.22) (2022-06-30)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+
+
+
+
+## [1.3.21](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.3.20...@ohif/extension-dicom-html@1.3.21) (2022-04-05)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+
+
+
+
+## [1.3.20](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.3.19...@ohif/extension-dicom-html@1.3.20) (2022-03-25)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+
+
+
+
+## [1.3.19](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.3.18...@ohif/extension-dicom-html@1.3.19) (2022-03-14)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+
+
+
+
 ## [1.3.18](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.3.17...@ohif/extension-dicom-html@1.3.18) (2022-02-03)
 
 **Note:** Version bump only for package @ohif/extension-dicom-html

extensions/dicom-html/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-html",
-  "version": "1.3.18",
+  "version": "1.3.22",
   "description": "OHIF extension for rendering structured reports to HTML",
   "author": "OHIF",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "peerDependencies": {
     "@ohif/core": "^0.50.0",
-    "dcmjs": "0.19.4",
+    "dcmjs": "0.19.9",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

extensions/dicom-html/src/OHIFDicomHtmlSopClassHandler.js

@@ -1,4 +1,4 @@
-import { MODULE_TYPES, utils } from '@ohif/core';
+import { MODULE_TYPES, utils, metadata } from '@ohif/core';
 
 // TODO: Should probably use dcmjs for this
 const SOP_CLASS_UIDS = {
@@ -10,7 +10,7 @@ const SOP_CLASS_UIDS = {
   MAMMOGRAPHY_CAD_SR: '1.2.840.10008.5.1.4.1.1.88.50',
   CHEST_CAD_SR: '1.2.840.10008.5.1.4.1.1.88.65',
   X_RAY_RADIATION_DOSE_SR: '1.2.840.10008.5.1.4.1.1.88.67',
-  ACQUISITION_CONTEXT_SR_STORAGE: '1.2.840.10008.5.1.4.1.1.88.71'
+  ACQUISITION_CONTEXT_SR_STORAGE: '1.2.840.10008.5.1.4.1.1.88.71',
 };
 
 const sopClassUIDs = Object.values(SOP_CLASS_UIDS);
@@ -32,7 +32,7 @@ const OHIFDicomHtmlSopClassHandler = {
       SeriesTime,
     } = metadata;
 
-    return {
+    const srDisplaySet = {
       plugin: 'html',
       Modality: 'SR',
       displaySetInstanceUID: utils.guid(),
@@ -49,7 +49,15 @@ const OHIFDicomHtmlSopClassHandler = {
       authorizationHeaders,
       sopClassUids: sopClassUIDs,
       images: series._instances,
+      isDerived: true,
+      referencedDisplaySets: [],
     };
+
+    srDisplaySet.getSourceDisplaySet = function() {
+      return srDisplaySet.referencedDisplaySets;
+    };
+
+    return srDisplaySet;
   },
 };
 

extensions/dicom-rt/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.7.11](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.7.10...@ohif/extension-dicom-rt@0.7.11) (2022-04-05)
+
+**Note:** Version bump only for package @ohif/extension-dicom-rt
+
+
+
+
+
+## [0.7.10](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.7.9...@ohif/extension-dicom-rt@0.7.10) (2022-03-25)
+
+**Note:** Version bump only for package @ohif/extension-dicom-rt
+
+
+
+
+
+## [0.7.9](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.7.8...@ohif/extension-dicom-rt@0.7.9) (2022-03-14)
+
+**Note:** Version bump only for package @ohif/extension-dicom-rt
+
+
+
+
+
 ## [0.7.8](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.7.7...@ohif/extension-dicom-rt@0.7.8) (2022-02-03)
 
 **Note:** Version bump only for package @ohif/extension-dicom-rt

extensions/dicom-rt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-rt",
-  "version": "0.7.8",
+  "version": "0.7.11",
   "description": "OHIF extension for rendering DICOM RTSTRUCTs on top of cornerstone images.",
   "author": "OHIF",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@ohif/core": "^0.50.0",
     "cornerstone-core": "^2.6.1",
     "cornerstone-tools": "^6.0.6",
-    "dcmjs": "0.19.4",
+    "dcmjs": "0.19.9",
     "gl-matrix": "^3.3.0",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",

extensions/dicom-segmentation/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.7.11](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.7.10...@ohif/extension-dicom-segmentation@0.7.11) (2022-04-05)
+
+**Note:** Version bump only for package @ohif/extension-dicom-segmentation
+
+
+
+
+
+## [0.7.10](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.7.9...@ohif/extension-dicom-segmentation@0.7.10) (2022-03-25)
+
+**Note:** Version bump only for package @ohif/extension-dicom-segmentation
+
+
+
+
+
+## [0.7.9](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.7.8...@ohif/extension-dicom-segmentation@0.7.9) (2022-03-14)
+
+**Note:** Version bump only for package @ohif/extension-dicom-segmentation
+
+
+
+
+
 ## [0.7.8](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.7.7...@ohif/extension-dicom-segmentation@0.7.8) (2022-02-03)
 
 **Note:** Version bump only for package @ohif/extension-dicom-segmentation

extensions/dicom-segmentation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-segmentation",
-  "version": "0.7.8",
+  "version": "0.7.11",
   "description": "OHIF extension for viewing segmentations in the 2D MPR view",
   "author": "OHIF",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@ohif/core": "^0.50.0",
     "cornerstone-core": "^2.6.1",
     "cornerstone-tools": "^6.0.6",
-    "dcmjs": "0.19.4",
+    "dcmjs": "0.19.9",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

extensions/dicom-segmentation/src/components/SegmentationPanel/SegmentationPanel.js

@@ -226,7 +226,6 @@ const SegmentationPanel = ({
     };
   }, [
     activeIndex,
-    updateSegmentationComboBox,
     viewports,
   ]);
 
@@ -234,23 +233,9 @@ const SegmentationPanel = ({
     const index = e.detail.activatedLabelmapIndex;
     if (index !== -1) {
       setState(state => ({ ...state, selectedSegmentation: index }));
-    } else {
-      cleanSegmentationComboBox();
     }
   };
 
-  const cleanSegmentationComboBox = () => {
-    setState(state => ({
-      ...state,
-      segmentsHidden: [],
-      segmentNumbers: [],
-      labelMapList: [],
-      segmentList: [],
-      isDisabled: true,
-      selectedSegmentation: -1,
-    }));
-  };
-
   const refreshSegmentations = () => {
     const activeViewport = getActiveViewport();
     const isDisabled = !activeViewport || !activeViewport.StudyInstanceUID;
@@ -709,7 +694,7 @@ const SegmentationPanel = ({
           count={state.segmentList.length}
           isVisible={
             state.segmentsHidden.filter(isHidden => isHidden === true).length <
-            state.segmentNumbers.length
+            state.segmentNumbers.length && state.segmentNumbers.length > 0
           }
           onVisibilityChange={onVisibilityChangeHandler}
         >

extensions/dicom-segmentation/src/utils/setActiveLabelMap.js

@@ -47,14 +47,23 @@ export default async function setActiveLabelmap(
     return labelmapIndex;
   }
 
-  if (!displaySet.isLoaded) {
+  if (!displaySet.isLoaded && !displaySet.loadError) {
     try {
       await displaySet.load(referencedDisplaySet, studies);
     } catch (error) {
       displaySet.isLoaded = false;
       displaySet.loadError = true;
+      displaySet.segLoadErrorMessagge = error.message;
       onDisplaySetLoadFailure(error);
 
+      /*
+       * TODO: Improve the way we notify parts of the app
+       * that depends on derived display sets to be loaded.
+       * (Implement pubsub for better tracking of derived display sets)
+       */
+      const event = new CustomEvent('segmentationLoadingError');
+      document.dispatchEvent(event);
+
       return -1;
     }
   }

extensions/dicom-tag-browser/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.2.23](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-tag-browser@0.2.22...@ohif/extension-dicom-tag-browser@0.2.23) (2022-04-06)
+
+**Note:** Version bump only for package @ohif/extension-dicom-tag-browser
+
+
+
+
+
+## [0.2.22](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-tag-browser@0.2.21...@ohif/extension-dicom-tag-browser@0.2.22) (2022-04-05)
+
+**Note:** Version bump only for package @ohif/extension-dicom-tag-browser
+
+
+
+
+
+## [0.2.21](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-tag-browser@0.2.20...@ohif/extension-dicom-tag-browser@0.2.21) (2022-03-25)
+
+**Note:** Version bump only for package @ohif/extension-dicom-tag-browser
+
+
+
+
+
+## [0.2.20](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-tag-browser@0.2.19...@ohif/extension-dicom-tag-browser@0.2.20) (2022-03-14)
+
+**Note:** Version bump only for package @ohif/extension-dicom-tag-browser
+
+
+
+
+
 ## [0.2.19](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-tag-browser@0.2.18...@ohif/extension-dicom-tag-browser@0.2.19) (2022-02-03)
 
 **Note:** Version bump only for package @ohif/extension-dicom-tag-browser

extensions/dicom-tag-browser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-tag-browser",
-  "version": "0.2.19",
+  "version": "0.2.23",
   "description": "OHIF extension for checking DICOM headers.",
   "author": "OHIF",
   "license": "MIT",
@@ -28,7 +28,7 @@
   },
   "peerDependencies": {
     "@ohif/core": "^2.6.0",
-    "dcmjs": "0.19.4",
+    "dcmjs": "0.19.9",
     "react": "^16.8.6"
   },
   "dependencies": {

extensions/dicom-tag-browser/src/components/DicomTagBrowser.js

@@ -59,7 +59,7 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
     let metadata;
     const isImageStack =
       activeDisplaySet instanceof ImageSet &&
-      activeDisplaySet.isModalitySupported === true;
+      activeDisplaySet.isSOPClassUIDSupported === true;
 
     let instanceList;
 

extensions/lesion-tracker/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.2.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-lesion-tracker@0.2.1...@ohif/extension-lesion-tracker@0.2.2) (2022-06-29)
+
+**Note:** Version bump only for package @ohif/extension-lesion-tracker
+
+
+
+
+
 ## [0.2.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-lesion-tracker@0.2.0...@ohif/extension-lesion-tracker@0.2.1) (2020-09-03)
 
 **Note:** Version bump only for package @ohif/extension-lesion-tracker

extensions/lesion-tracker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-lesion-tracker",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "OHIF extension for Lesion Tracker",
   "author": "OHIF",
   "license": "MIT",

extensions/lesion-tracker/src/components/MeasurementComparisonTable.js

@@ -76,13 +76,13 @@ const additionalFindings = [
 
 const currentCollections = [
   {
-    selectorAction: () => { },
+    selectorAction: () => {},
     maxMeasurements: 3,
     groupName: 'Measurements',
     measurements: measurements,
   },
   {
-    selectorAction: () => { },
+    selectorAction: () => {},
     groupName: 'Additional Findings',
     measurements: additionalFindings,
   },
@@ -90,13 +90,13 @@ const currentCollections = [
 
 const comparisonColletions = [
   {
-    selectorAction: () => { },
+    selectorAction: () => {},
     maxMeasurements: 3,
     groupName: 'Measurements',
     measurements: measurements,
   },
   {
-    selectorAction: () => { },
+    selectorAction: () => {},
     groupName: 'Additional Findings',
     measurements: additionalFindings,
   },
@@ -128,7 +128,7 @@ const comparisonTimepoints = [
   {
     key: 'Comparison',
     date: '15-Jun-18',
-  }
+  },
 ];
 
 const MeasurementComparisonTable = () => {
@@ -138,8 +138,8 @@ const MeasurementComparisonTable = () => {
         timepoints={comparisonTimepoints}
         overallWarnings={overallWarnings}
         measurementCollection={comparisonCollections}
-        onRelabelClick={() => { }}
+        onRelabelClick={() => {}}
-        onEditDescriptionClick={() => { }}
+        onEditDescriptionClick={() => {}}
       />
       <div className="generate-report">
         <button className="btn btn-primary">Generate Report</button>

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,94 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.12.27](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.12.26...@ohif/extension-vtk@1.12.27) (2022-06-30)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.12.26](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.12.25...@ohif/extension-vtk@1.12.26) (2022-06-29)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.12.25](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.12.24...@ohif/extension-vtk@1.12.25) (2022-06-28)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.12.24](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.12.23...@ohif/extension-vtk@1.12.24) (2022-06-14)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.12.23](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.12.22...@ohif/extension-vtk@1.12.23) (2022-04-22)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.12.22](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.12.21...@ohif/extension-vtk@1.12.22) (2022-04-06)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.12.21](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.12.20...@ohif/extension-vtk@1.12.21) (2022-04-05)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.12.20](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.12.19...@ohif/extension-vtk@1.12.20) (2022-03-25)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.12.19](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.12.18...@ohif/extension-vtk@1.12.19) (2022-03-14)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.12.18](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.12.17...@ohif/extension-vtk@1.12.18) (2022-03-14)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.12.17](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.12.16...@ohif/extension-vtk@1.12.17) (2022-03-14)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 ## [1.12.16](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.12.15...@ohif/extension-vtk@1.12.16) (2022-02-15)
 
 **Note:** Version bump only for package @ohif/extension-vtk

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "1.12.16",
+  "version": "1.12.27",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "cornerstone-core": "^2.6.1",
     "cornerstone-tools": "^6.0.6",
     "cornerstone-wado-image-loader": "^4.1.0",
-    "dcmjs": "0.19.4",
+    "dcmjs": "0.19.9",
     "dicom-parser": "^1.8.11",
     "i18next": "^17.0.3",
     "i18next-browser-languagedetector": "^3.0.1",
@@ -53,8 +53,8 @@
     "react-vtkjs-viewport": "^0.14.4"
   },
   "devDependencies": {
-    "@ohif/core": "^2.16.12",
+    "@ohif/core": "^2.16.22",
-    "@ohif/ui": "^1.10.6",
+    "@ohif/ui": "^1.10.9",
     "cornerstone-tools": "^6.0.6",
     "cornerstone-wado-image-loader": "^4.1.0",
     "dicom-parser": "^1.8.11",

package.json

@@ -99,6 +99,7 @@
     "shader-loader": "^1.3.1",
     "start-server-and-test": "^1.10.0",
     "style-loader": "^1.0.0",
+    "styled-components": "^5.3.5",
     "stylelint": "^10.1.0",
     "stylelint-config-recommended": "^2.2.0",
     "stylus": "^0.54.5",

platform/core/CHANGELOG.md

@@ -3,6 +3,92 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.16.22](https://github.com/OHIF/Viewers/compare/@ohif/core@2.16.21...@ohif/core@2.16.22) (2022-06-30)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.16.21](https://github.com/OHIF/Viewers/compare/@ohif/core@2.16.20...@ohif/core@2.16.21) (2022-06-29)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.16.20](https://github.com/OHIF/Viewers/compare/@ohif/core@2.16.19...@ohif/core@2.16.20) (2022-06-28)
+
+
+### Bug Fixes
+
+* Re IDC2797, fix double parsing of SR qualitative annotations ([#2830](https://github.com/OHIF/Viewers/issues/2830)) ([9f813e0](https://github.com/OHIF/Viewers/commit/9f813e0ea08f0aada8efab9ef6228ad90dd1758d))
+
+
+
+
+
+## [2.16.19](https://github.com/OHIF/Viewers/compare/@ohif/core@2.16.18...@ohif/core@2.16.19) (2022-06-14)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.16.18](https://github.com/OHIF/Viewers/compare/@ohif/core@2.16.17...@ohif/core@2.16.18) (2022-04-22)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.16.17](https://github.com/OHIF/Viewers/compare/@ohif/core@2.16.16...@ohif/core@2.16.17) (2022-04-06)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.16.16](https://github.com/OHIF/Viewers/compare/@ohif/core@2.16.15...@ohif/core@2.16.16) (2022-04-05)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.16.15](https://github.com/OHIF/Viewers/compare/@ohif/core@2.16.14...@ohif/core@2.16.15) (2022-03-25)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.16.14](https://github.com/OHIF/Viewers/compare/@ohif/core@2.16.13...@ohif/core@2.16.14) (2022-03-14)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.16.13](https://github.com/OHIF/Viewers/compare/@ohif/core@2.16.12...@ohif/core@2.16.13) (2022-03-14)
+
+
+### Bug Fixes
+
+* Update fetchPaletteColorLookupTableData: LUT Entries shall be 0 if the table entries value is 2^16 ([#2395](https://github.com/OHIF/Viewers/issues/2395)) ([0ba796c](https://github.com/OHIF/Viewers/commit/0ba796c73c5254f1bc5ac72c58fd06abf19d7102))
+
+
+
+
+
 ## [2.16.12](https://github.com/OHIF/Viewers/compare/@ohif/core@2.16.11...@ohif/core@2.16.12) (2022-02-15)
 
 **Note:** Version bump only for package @ohif/core

platform/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/core",
-  "version": "2.16.12",
+  "version": "2.16.22",
   "description": "Generic business logic for web-based medical imaging applications",
   "author": "OHIF Core Team",
   "license": "MIT",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "ajv": "^6.10.0",
-    "dcmjs": "0.19.4",
+    "dcmjs": "0.19.9",
     "dicomweb-client": "^0.8.3",
     "immer": "9.0.12",
     "isomorphic-base64": "^1.0.2",

platform/core/src/DICOMSR/SCOORD3D/constants/scoordTypes.js

@@ -1,4 +1,5 @@
 export default {
+  TEXT: 'TEXT',
   POINT: 'POINT',
   MULTIPOINT: 'MULTIPOINT',
   POLYLINE: 'POLYLINE',

platform/core/src/DICOMSR/SCOORD3D/parseSCOORD3D.js

@@ -18,7 +18,7 @@ const parseSCOORD3D = ({ servicesManager, displaySets }) => {
     const { ContentSequence } = firstInstance;
 
     srDisplaySet.referencedImages = getReferencedImagesList(ContentSequence);
-    srDisplaySet.measurements = getMeasurements(ContentSequence, srDisplaySet);
+    srDisplaySet.measurements = getMeasurements(ContentSequence);
     const mappings = MeasurementService.getSourceMappings(
       'CornerstoneTools',
       '4'
@@ -127,10 +127,11 @@ const checkIfCanAddMeasurementsToDisplaySet = (
 
   const imageIds = images.map(i => i.getImageId());
   const SOPInstanceUIDs = images.map(i => i.SOPInstanceUID);
+  imageDisplaySet.SRLabels = [];
+  const colors = new Map();
   measurements.forEach(measurement => {
     const { coords } = measurement;
-
+    coords.forEach((coord, index) => {
-    coords.forEach(coord => {
       if (coord.ReferencedSOPSequence !== undefined) {
         const imageIndex = SOPInstanceUIDs.findIndex(
           SOPInstanceUID =>
@@ -138,14 +139,50 @@ const checkIfCanAddMeasurementsToDisplaySet = (
             coord.ReferencedSOPSequence.ReferencedSOPInstanceUID
         );
         if (imageIndex > -1) {
+          if (!srDisplaySet.referencedDisplaySets.includes(imageDisplaySet)) {
+            srDisplaySet.referencedDisplaySets.push(imageDisplaySet);
+          }
+
           const imageId = imageIds[imageIndex];
           const imageMetadata = images[imageIndex].getData().metadata;
-          addMeasurement(
+
-            measurement,
+          if (coord.GraphicType === 'TEXT') {
-            imageId,
+            const key =
-            imageMetadata,
+              measurement.labels[index].label + measurement.labels[index].value;
-            imageDisplaySet.displaySetInstanceUID
+            let color = colors.get(key);
-          );
+            if (!color) {
+              // random dark color
+              color =
+                'hsla(' + Math.floor(Math.random() * 360) + ', 70%, 30%, 1)';
+              colors.set(key, color);
+            }
+
+            measurement.labels[index].color = color;
+            measurement.isSRText = true;
+            measurement.labels[index].visible = true;
+
+            imageDisplaySet.SRLabels.push({
+              ReferencedSOPInstanceUID:
+                coord.ReferencedSOPSequence.ReferencedSOPInstanceUID,
+              labels: measurement.labels[index],
+            });
+
+            if (index === 0) {
+              addMeasurement(
+                measurement,
+                imageId,
+                imageMetadata,
+                imageDisplaySet.displaySetInstanceUID
+              );
+            }
+          } else {
+            addMeasurement(
+              measurement,
+              imageId,
+              imageMetadata,
+              imageDisplaySet.displaySetInstanceUID
+            );
+          }
         }
       }
     });

platform/core/src/DICOMSR/SCOORD3D/utils/addMeasurement.js

@@ -26,8 +26,10 @@ export default function addMeasurement(
 
   const measurementData = {
     TrackingUniqueIdentifier: measurement.TrackingUniqueIdentifier,
+    TrackingIdentifier: measurement.TrackingIdentifier,
     renderableData: {},
     labels: measurement.labels,
+    isSRText: measurement.isSRText,
   };
 
   measurement.coords.forEach(coord => {

platform/core/src/DICOMSR/SCOORD3D/utils/getCoordsFromSCOORDOrSCOORD3D.js

@@ -1,22 +1,14 @@
-const getCoordsFromSCOORDOrSCOORD3D = (graphicItem, displaySet) => {
+const getCoordsFromSCOORDOrSCOORD3D = graphicItem => {
-  const { ValueType, RelationshipType, GraphicType, GraphicData } = graphicItem;
+  const { ValueType, GraphicType, GraphicData } = graphicItem;
-
-  // if (RelationshipType !== RELATIONSHIP_TYPE.INFERRED_FROM) {
-  //   console.warn(
-  //     `Relationshiptype === ${RelationshipType}. Cannot deal with NON TID-1400 SCOORD group with RelationshipType !== "INFERRED FROM."`
-  //   );
-  //   return;
-  // }
-
   const coords = { ValueType, GraphicType, GraphicData };
 
-  // ContentSequence has length of 1 as RelationshipType === 'INFERRED FROM'
   if (ValueType === 'SCOORD') {
     const { ReferencedSOPSequence } = graphicItem.ContentSequence;
     coords.ReferencedSOPSequence = ReferencedSOPSequence;
   } else if (ValueType === 'SCOORD3D') {
     if (graphicItem.ReferencedFrameOfReferenceUID) {
-      coords.ReferencedFrameOfReferenceSequence = graphicItem.ReferencedFrameOfReferenceUID;
+      coords.ReferencedFrameOfReferenceSequence =
+        graphicItem.ReferencedFrameOfReferenceUID;
     } else if (graphicItem.ContentSequence) {
       const {
         ReferencedFrameOfReferenceSequence,

platform/core/src/DICOMSR/SCOORD3D/utils/getMeasurements.js

@@ -3,10 +3,7 @@ import getSequenceAsArray from './getSequenceAsArray';
 import getMergedContentSequencesByTrackingUniqueIdentifiers from './getMergedContentSequencesByTrackingUniqueIdentifiers';
 import processMeasurement from './processMeasurement';
 
-const getMeasurements = (
+const getMeasurements = ImagingMeasurementReportContentSequence => {
-  ImagingMeasurementReportContentSequence,
-  displaySet
-) => {
   const ImagingMeasurements = ImagingMeasurementReportContentSequence.find(
     item =>
       item.ConceptNameCodeSequence.CodeValue ===
@@ -21,25 +18,19 @@ const getMeasurements = (
       CodeNameCodeSequenceValues.MeasurementGroup
   );
 
-  const mergedContentSequencesByTrackingUniqueIdentifiers = getMergedContentSequencesByTrackingUniqueIdentifiers(
+  /* const mergedContentSequencesByTrackingUniqueIdentifiers = getMergedContentSequencesByTrackingUniqueIdentifiers(
     MeasurementGroups
-  );
+  );*/
 
   let measurements = [];
 
-  Object.keys(mergedContentSequencesByTrackingUniqueIdentifiers).forEach(
+  MeasurementGroups.forEach(MeasurementGroup => {
-    trackingUniqueIdentifier => {
+    const contentSequence = MeasurementGroup.ContentSequence;
-      const mergedContentSequence =
+    const measurement = processMeasurement(contentSequence);
-        mergedContentSequencesByTrackingUniqueIdentifiers[
+    if (measurement) {
-          trackingUniqueIdentifier
+      measurements.push(measurement);
-        ];
-
-      const measurement = processMeasurement(mergedContentSequence, displaySet);
-      if (measurement) {
-        measurements.push(measurement);
-      }
     }
-  );
+  });
 
   return measurements;
 };

platform/core/src/DICOMSR/SCOORD3D/utils/getRenderableData.js

@@ -57,6 +57,10 @@ const getRenderableData = (
 
   // https://dicom.innolitics.com/ciods/procedure-log/sr-document-content/00700023
   switch (GraphicType) {
+    case SCOORD_TYPES.TEXT:
+      renderableData = [{ x: GraphicData[0], y: GraphicData[1] }];
+
+      break;
     case SCOORD_TYPES.POINT:
       renderableData = [];
 

platform/core/src/DICOMSR/SCOORD3D/utils/processMeasurement.js

@@ -1,16 +1,16 @@
 import processTID1410Measurement from './processTID1410Measurement';
 import processNonGeometricallyDefinedMeasurement from './processNonGeometricallyDefinedMeasurement';
 
-const processMeasurement = (mergedContentSequence, displaySet) => {
+const processMeasurement = contentSequence => {
   if (
-    mergedContentSequence.some(
+    contentSequence.some(
       group => group.ValueType === 'SCOORD' || group.ValueType === 'SCOORD3D'
     )
   ) {
-    return processTID1410Measurement(mergedContentSequence, displaySet);
+    return processTID1410Measurement(contentSequence);
   }
 
-  return processNonGeometricallyDefinedMeasurement(mergedContentSequence);
+  return processNonGeometricallyDefinedMeasurement(contentSequence);
 };
 
 export default processMeasurement;

platform/core/src/DICOMSR/SCOORD3D/utils/processNonGeometricallyDefinedMeasurement.js

@@ -1,31 +1,40 @@
 import getLabelFromMeasuredValueSequence from './getLabelFromMeasuredValueSequence';
 import getCoordsFromSCOORDOrSCOORD3D from './getCoordsFromSCOORDOrSCOORD3D';
 import { CodeNameCodeSequenceValues, CodingSchemeDesignators } from '../enums';
+import SCOORD_TYPES from '../constants/scoordTypes';
 
 const CORNERSTONE_FREETEXT_CODE_VALUE = 'CORNERSTONEFREETEXT';
 
-const processNonGeometricallyDefinedMeasurement = mergedContentSequence => {
+const processNonGeometricallyDefinedMeasurement = contentSequence => {
-  const NUMContentItems = mergedContentSequence.filter(
+  const NUMContentItems = contentSequence.filter(
     group => group.ValueType === 'NUM'
   );
 
-  const UIDREFContentItem = mergedContentSequence.find(
+  const CODEContentItems = contentSequence.filter(
+    group => group.ValueType === 'CODE'
+  );
+
+  const UIDREFContentItem = contentSequence.find(
     group => group.ValueType === 'UIDREF'
   );
 
-  const TrackingIdentifierContentItem = mergedContentSequence.find(
+  const IMAGEContentItem = contentSequence.find(
+    group => group.ValueType === 'IMAGE'
+  );
+
+  const TrackingIdentifierContentItem = contentSequence.find(
     item =>
       item.ConceptNameCodeSequence.CodeValue ===
       CodeNameCodeSequenceValues.TrackingIdentifier
   );
 
-  const Finding = mergedContentSequence.find(
+  const Finding = contentSequence.find(
     item =>
       item.ConceptNameCodeSequence.CodeValue ===
       CodeNameCodeSequenceValues.Finding
   );
 
-  const FindingSites = mergedContentSequence.filter(
+  const FindingSites = contentSequence.filter(
     item =>
       item.ConceptNameCodeSequence.CodingSchemeDesignator ===
         CodingSchemeDesignators.SRT &&
@@ -111,6 +120,37 @@ const processNonGeometricallyDefinedMeasurement = mergedContentSequence => {
     }
   });
 
+  if (NUMContentItems.length === 0 && IMAGEContentItem) {
+    CODEContentItems.forEach(item => {
+      const { ConceptCodeSequence, ConceptNameCodeSequence } = item;
+
+      if (!ConceptCodeSequence || !ConceptNameCodeSequence) {
+        console.warn(`Graphic missing, skipping annotation.`);
+
+        return;
+      }
+
+      const GraphicData = [0, 0];
+      const GraphicType = SCOORD_TYPES.TEXT;
+      const { ValueType } = item;
+      const ReferencedSOPSequence = IMAGEContentItem.ReferencedSOPSequence;
+      const coord = {
+        ValueType,
+        GraphicType,
+        GraphicData,
+        ReferencedSOPSequence,
+      };
+      measurement.coords.push(coord);
+      measurement.labels.push({
+        label: ConceptNameCodeSequence.CodeMeaning,
+        labelCodingSchemeDesignator:
+          ConceptNameCodeSequence.CodingSchemeDesignator,
+        value: ConceptCodeSequence.CodeMeaning,
+        valueCodingSchemeDesignator: ConceptCodeSequence.CodingSchemeDesignator,
+      });
+    });
+  }
+
   return measurement;
 };
 

platform/core/src/DICOMSR/SCOORD3D/utils/processTID1410Measurement.js

@@ -5,14 +5,14 @@ import { RELATIONSHIP_TYPE, CodeNameCodeSequenceValues } from '../enums';
 /**
  * TID 1410 Planar ROI Measurements and Qualitative Evaluations.
  *
- * @param {*} mergedContentSequence
+ * @param {*} contentSequence
  * @returns
  */
-const processTID1410Measurement = (mergedContentSequence, displaySet) => {
+const processTID1410Measurement = contentSequence => {
   // Need to deal with TID 1410 style measurements, which will have a SCOORD or SCOORD3D at the top level,
   // And non-geometric representations where each NUM has "INFERRED FROM" SCOORD/SCOORD3D
 
-  const graphicItem = mergedContentSequence.find(
+  const graphicItem = contentSequence.find(
     group => group.ValueType === 'SCOORD' || group.ValueType === 'SCOORD3D'
   );
 
@@ -23,24 +23,24 @@ const processTID1410Measurement = (mergedContentSequence, displaySet) => {
     return;
   }
 
-  const UIDREFContentItem = mergedContentSequence.find(
+  const UIDREFContentItem = contentSequence.find(
     group => group.ValueType === 'UIDREF'
   );
 
-  const TrackingIdentifierContentItem = mergedContentSequence.find(
+  const TrackingIdentifierContentItem = contentSequence.find(
     item =>
       item.ConceptNameCodeSequence.CodeValue ===
       CodeNameCodeSequenceValues.TrackingIdentifier
   );
 
-  const NUMContentItems = mergedContentSequence.filter(
+  const NUMContentItems = contentSequence.filter(
     group => group.ValueType === 'NUM'
   );
 
   const measurement = {
     loaded: false,
     labels: [],
-    coords: [getCoordsFromSCOORDOrSCOORD3D(graphicItem, displaySet)],
+    coords: [getCoordsFromSCOORDOrSCOORD3D(graphicItem)],
     TrackingUniqueIdentifier: UIDREFContentItem.UID,
     TrackingIdentifier: TrackingIdentifierContentItem.TextValue,
   };

platform/core/src/classes/StudyLoadingListener.js

@@ -401,7 +401,7 @@ class StackLoadingListener extends BaseLoadingListener {
     const totalFramesCount = this.stack.imageIds.length;
     const loadedFramesCount = this.loadedCount;
     const loadingFramesCount = totalFramesCount - loadedFramesCount;
-    const percentComplete = Math.round(
+    const percentComplete = Math.ceil(
       (loadedFramesCount / totalFramesCount) * 100
     );
     const progressId = this._getProgressId();

platform/core/src/classes/metadata/StudyMetadata.js

@@ -3,12 +3,12 @@ import DICOMWeb from './../../DICOMWeb';
 import ImageSet from './../ImageSet';
 import { InstanceMetadata } from './InstanceMetadata';
 import { Metadata } from './Metadata';
-import OHIFError from '../OHIFError';
 import { SeriesMetadata } from './SeriesMetadata';
 // - createStacks
 import { api } from 'dicomweb-client';
 // - createStacks
 import { isImage } from '../../utils/isImage';
+import { naturalizeSOPClassUID } from '../../utils/naturalizeSOPClassUID';
 import {
   isDisplaySetReconstructable,
   isSpacingUniform,
@@ -169,8 +169,12 @@ class StudyMetadata extends Metadata {
         !isImage(instance.getTagValue('SOPClassUID')) &&
         !instance.getTagValue('Rows')
       ) {
-        // we set an empty display and we add a isModalitySupported variable to
+        // we set an empty display and we add a isSOPClassUIDSupported variable to
-        // print a warning that the modality is not supported in the thumbnail.
+        // print a warning that the series is not supported in the thumbnail.
+        // SOPClassUIDNaturalized is human readable name, since for non image series,
+        // we could have a mismatch between the SOPClassUID and the Modality.
+        // For example, in the Parametric map IOD Modality is expected to match
+        // the value for the series used to generate Parametric map, and there is no "PM" modality.
         const displaySet = new ImageSet([]);
         const seriesData = series.getData();
         displaySet.setAttributes({
@@ -188,7 +192,10 @@ class StudyMetadata extends Metadata {
           InstanceNumber: instance.getTagValue('InstanceNumber'), // Include the instance number
           AcquisitionDatetime: instance.getTagValue('AcquisitionDateTime'), // Include the acquisition datetime
           isReconstructable: false,
-          isModalitySupported: false,
+          isSOPClassUIDSupported: false,
+          SOPClassUIDNaturalized: naturalizeSOPClassUID(
+            instance.getTagValue('SOPClassUID')
+          ),
           metadata: instance.getData().metadata,
         });
 
@@ -333,10 +340,31 @@ class StudyMetadata extends Metadata {
     if (referencedSeriesInstanceUID) {
       filteredDerivedDisplaySets = filteredDerivedDisplaySets.filter(
         displaySet => {
-          return (
+          const referencedDisplaySet = StudyMetadata.getReferencedDisplaySet(
-            StudyMetadata.getReferencedDisplaySet(displaySet, [this])
+            displaySet,
-              .SeriesInstanceUID === referencedSeriesInstanceUID
+            [this]
           );
+          if (referencedDisplaySet) {
+            return (
+              referencedDisplaySet.SeriesInstanceUID ===
+              referencedSeriesInstanceUID
+            );
+          } else {
+            const filteredReferencedDisplaySets = displaySet.referencedDisplaySets.filter(
+              referencedDisplaySet =>
+                referencedDisplaySet.SeriesInstanceUID ===
+                referencedSeriesInstanceUID
+            );
+
+            if (
+              filteredReferencedDisplaySets &&
+              filteredReferencedDisplaySets.length !== 0
+            ) {
+              return true;
+            }
+
+            return false;
+          }
         }
       );
     }
@@ -923,7 +951,7 @@ const makeDisplaySet = (series, instances) => {
       : displayReconstructableInfo.reconstructionIssues;
   }
 
-  imageSet.isModalitySupported = true;
+  imageSet.isSOPClassUIDSupported = true;
 
   return imageSet;
 };

platform/core/src/measurements/tools/dicomSRDisplayTool.js

@@ -6,7 +6,8 @@ export const dicomSRDisplayTool = {
   options: {
     measurementTable: {
       displayFunction: data => {
-        return `(SR) ${data.lesionNamingNumber ||
+        return `(SR) ${data.TrackingIdentifier ||
+          data.lesionNamingNumber ||
           data.measurementNumber ||
           data.text ||
           ''}`;

platform/core/src/utils/loadAndCacheDerivedDisplaySets.js

@@ -49,7 +49,12 @@ import studyMetadataManager from './studyMetadataManager';
  * @param {object} snackbar
  * @returns void
  */
-async function loadAndCacheDerivedDisplaySets(referencedDisplaySet, studies, logger, snackbar) {
+async function loadAndCacheDerivedDisplaySets(
+  referencedDisplaySet,
+  studies,
+  logger,
+  snackbar
+) {
   const { StudyInstanceUID, SeriesInstanceUID } = referencedDisplaySet;
   const promises = [];
   const studyMetadata = studyMetadataManager.get(StudyInstanceUID);
@@ -80,60 +85,111 @@ async function loadAndCacheDerivedDisplaySets(referencedDisplaySet, studies, log
   });
 
   // For each type, see if any are loaded, if not load the most recent.
-  await Promise.all(Object.keys(displaySetsPerModality).map(async (key) => {
+  await Promise.all(
-    const displaySets = displaySetsPerModality[key];
+    Object.keys(displaySetsPerModality).map(async key => {
+      const displaySets = displaySetsPerModality[key];
 
-    const isLoaded = displaySets.some(displaySet => displaySet.isLoaded);
+      const isLoaded = displaySets.some(displaySet => displaySet.isLoaded);
-    if (isLoaded) {
+      if (isLoaded) {
-      return;
+        return;
-    }
-
-    if (displaySets.some(displaySet => displaySet.loadError)) {
-      return;
-    }
-
-    // find most recent and load it.
-    let recentDateTime = 0;
-    let recentDisplaySet = displaySets[0];
-
-    displaySets.forEach(displaySet => {
-      const dateTime = Number(
-        `${displaySet.SeriesDate}${displaySet.SeriesTime}`
-      );
-      if (dateTime > recentDateTime) {
-        recentDateTime = dateTime;
-        recentDisplaySet = displaySet;
       }
-    });
 
-    try {
+      if (displaySets.some(displaySet => displaySet.loadError)) {
-      if (recentDisplaySet.hasOwnProperty('getSourceDisplaySet') &&
+        return;
-        typeof recentDisplaySet.getSourceDisplaySet === 'function') {
-        await recentDisplaySet.getSourceDisplaySet(studies);
-      } else {
-        await recentDisplaySet.load(referencedDisplaySet, studies);
       }
-    } catch (error) {
+
-      recentDisplaySet.isLoaded = false;
+      // find most recent and load it.
-      recentDisplaySet.loadError = true;
+      let recentDateTime = 0;
-      logger.error({ error, message: error.message });
+      let recentDisplaySet = displaySets[0];
-      snackbar.show({
+
-        title: 'Error loading derived display set:',
+      displaySets.forEach(displaySet => {
-        message: error.message,
+        const dateTime = Number(
-        type: 'error',
+          `${displaySet.SeriesDate}${displaySet.SeriesTime}`
-        error,
+        );
-        autoClose: false,
+        if (dateTime > recentDateTime) {
+          recentDateTime = dateTime;
+          recentDisplaySet = displaySet;
+        }
       });
-    }
+
-  }));
+      try {
+        if (
+          recentDisplaySet.hasOwnProperty('getSourceDisplaySet') &&
+          typeof recentDisplaySet.getSourceDisplaySet === 'function'
+        ) {
+          if (recentDisplaySet.Modality === 'SEG' && logger) {
+            const onDisplaySetLoadFailureHandler = error => {
+              logger.error({ error, message: error.message });
+              snackbar.show({
+                title: 'DICOM Segmentation Loader',
+                message: error.message,
+                type: 'error',
+                autoClose: true,
+              });
+            };
+
+            let activatedLabelmapIndex = -1;
+            while (activatedLabelmapIndex == -1) {
+              const {
+                referencedDisplaySet,
+                activatedLabelmapPromise,
+              } = await recentDisplaySet.getSourceDisplaySet(
+                studies,
+                true,
+                onDisplaySetLoadFailureHandler
+              );
+
+              activatedLabelmapIndex = await activatedLabelmapPromise;
+              const selectionFired = new CustomEvent(
+                'extensiondicomsegmentationsegselected',
+                {
+                  detail: { activatedLabelmapIndex: activatedLabelmapIndex },
+                }
+              );
+              document.dispatchEvent(selectionFired);
+
+              const lastDateTime = Number(
+                `${recentDisplaySet.SeriesDate}${recentDisplaySet.SeriesTime}`
+              );
+              recentDateTime = 0;
+              displaySets.forEach(displaySet => {
+                const dateTime = Number(
+                  `${displaySet.SeriesDate}${displaySet.SeriesTime}`
+                );
+                if (dateTime > recentDateTime && dateTime < lastDateTime) {
+                  recentDateTime = dateTime;
+                  recentDisplaySet = displaySet;
+                }
+              });
+            }
+          } else {
+            await recentDisplaySet.getSourceDisplaySet(studies);
+          }
+        } else {
+          await recentDisplaySet.load(referencedDisplaySet, studies);
+        }
+      } catch (error) {
+        recentDisplaySet.isLoaded = false;
+        recentDisplaySet.loadError = true;
+        logger.error({ error, message: error.message });
+        snackbar.show({
+          title: 'Error loading derived display set:',
+          message: error.message,
+          type: 'error',
+          error,
+          autoClose: false,
+        });
+      }
+    })
+  );
 
   /*
-  * TODO: Improve the way we notify parts of the app
+   * TODO: Improve the way we notify parts of the app
-  * that depends on derived display sets to be loaded.
+   * that depends on derived display sets to be loaded.
-  * (Implement pubsub for better tracking of derived display sets)
+   * (Implement pubsub for better tracking of derived display sets)
-  */
+   */
   const event = new CustomEvent('deriveddisplaysetsloadedandcached');
   document.dispatchEvent(event);
-};
+}
 
 export default loadAndCacheDerivedDisplaySets;

platform/core/src/utils/metadataProvider/fetchPaletteColorLookupTableData.js

@@ -113,7 +113,7 @@ const _paletteColorCache = {
 };
 
 function _getPaletteColor(server, paletteColorLookupTableData, lutDescriptor) {
-  const numLutEntries = lutDescriptor[0];
+  const numLutEntries = lutDescriptor[0] ? lutDescriptor[0] : 65536;
   const bits = lutDescriptor[2];
 
   const arrayBufferToPaletteColorLUT = arraybuffer => {

platform/core/src/utils/naturalizeSOPClassUID.js

@@ -0,0 +1,200 @@
+import { sopClassDictionary } from './sopClassDictionary';
+import { isImage } from './isImage';
+
+/**
+ * Naturalize SOP Class UID which do not have image data
+ * @param {string} SOPClassUID - SOP Class UID to be converted
+ * @returns {string} - human readable name
+ */
+export const naturalizeSOPClassUID = SOPClassUID => {
+  let naturalizedName = '';
+  if (!SOPClassUID) return naturalizedName;
+  if (!isImage) return naturalizedName;
+
+  if (sopClassDictionary.MRSpectroscopyStorage === SOPClassUID) {
+    naturalizedName = 'MRSpectroscopy';
+  } else if (sopClassDictionary.EnhancedUSVolumeStorage === SOPClassUID) {
+    naturalizedName = 'EnhancedUSVolume';
+  } else if (sopClassDictionary.Sop12LeadECGWaveformStorage === SOPClassUID) {
+    naturalizedName = 'Sop12LeadECGWaveform';
+  } else if (sopClassDictionary.GeneralECGWaveformStorage === SOPClassUID) {
+    naturalizedName = 'GeneralECGWaveform';
+  } else if (sopClassDictionary.AmbulatoryECGWaveformStorage === SOPClassUID) {
+    naturalizedName = 'AECAmbulatoryECGWaveformGW';
+  } else if (sopClassDictionary.HemodynamicWaveformStorage === SOPClassUID) {
+    naturalizedName = 'HemodynamicWaveform';
+  } else if (
+    sopClassDictionary.CardiacElectrophysiologyWaveformStorage === SOPClassUID
+  ) {
+    naturalizedName = 'CardiacElectrophysiologyWaveform';
+  } else if (
+    sopClassDictionary.BasicVoiceAudioWaveformStorage === SOPClassUID
+  ) {
+    naturalizedName = 'BasicVoiceAudioWaveform';
+  } else if (sopClassDictionary.GeneralAudioWaveformStorage === SOPClassUID) {
+    naturalizedName = 'GGeneralAudioWaveformAW';
+  } else if (sopClassDictionary.ArterialPulseWaveformStorage === SOPClassUID) {
+    naturalizedName = 'APArterialPulseWaveformW';
+  } else if (sopClassDictionary.RespiratoryWaveformStorage === SOPClassUID) {
+    naturalizedName = 'RespiratoryWaveform';
+  } else if (
+    sopClassDictionary.GrayscaleSoftcopyPresentationStateStorage === SOPClassUID
+  ) {
+    naturalizedName = 'GrayscaleSoftcopyPresentationState';
+  } else if (
+    sopClassDictionary.ColorSoftcopyPresentationStateStorage === SOPClassUID
+  ) {
+    naturalizedName = 'ColorSoftcopyPresentationState';
+  } else if (
+    sopClassDictionary.PseudoColorSoftcopyPresentationStateStorage ===
+    SOPClassUID
+  ) {
+    naturalizedName = 'PseudoColorSoftcopyPresentationState';
+  } else if (
+    sopClassDictionary.BlendingSoftcopyPresentationStateStorage === SOPClassUID
+  ) {
+    naturalizedName = 'BlendingSoftcopyPresentationState';
+  } else if (
+    sopClassDictionary.XAXRFGrayscaleSoftcopyPresentationStateStorage ===
+    SOPClassUID
+  ) {
+    naturalizedName = 'XAXRFGrayscaleSoftcopyPresentationState';
+  } else if (sopClassDictionary.RawDataStorage === SOPClassUID) {
+    naturalizedName = 'RawData';
+  } else if (sopClassDictionary.SpatialRegistrationStorage === SOPClassUID) {
+    naturalizedName = 'SpatialRegistration';
+  } else if (sopClassDictionary.SpatialFiducialsStorage === SOPClassUID) {
+    naturalizedName = 'SpatialFiducials';
+  } else if (
+    sopClassDictionary.DeformableSpatialRegistrationStorage === SOPClassUID
+  ) {
+    naturalizedName = 'DeformableSpatialRegistration';
+  } else if (sopClassDictionary.SegmentationStorage === SOPClassUID) {
+    naturalizedName = 'SEG';
+  } else if (sopClassDictionary.SurfaceSegmentationStorage === SOPClassUID) {
+    naturalizedName = 'SurfaceSEG';
+  } else if (sopClassDictionary.RealWorldValueMappingStorage === SOPClassUID) {
+    naturalizedName = 'RealWorldValueMapping';
+  } else if (sopClassDictionary.SurfaceScanMeshStorage === SOPClassUID) {
+    naturalizedName = 'SurfaceScanMesh';
+  } else if (sopClassDictionary.SurfaceScanPointCloudStorage === SOPClassUID) {
+    naturalizedName = 'SurfaceScanPointCloud';
+  } else if (
+    sopClassDictionary.StereometricRelationshipStorage === SOPClassUID
+  ) {
+    naturalizedName = 'StereometricRelationship';
+  } else if (sopClassDictionary.LensometryMeasurementsStorage === SOPClassUID) {
+    naturalizedName = 'LensometryMeasurements';
+  } else if (
+    sopClassDictionary.AutorefractionMeasurementsStorage === SOPClassUID
+  ) {
+    naturalizedName = 'AutorefractionMeasurements';
+  } else if (
+    sopClassDictionary.KeratometryMeasurementsStorage === SOPClassUID
+  ) {
+    naturalizedName = 'KeratometryMeasurements';
+  } else if (
+    sopClassDictionary.SubjectiveRefractionMeasurementsStorage === SOPClassUID
+  ) {
+    naturalizedName = 'SubjectiveRefractionMeasurements';
+  } else if (
+    sopClassDictionary.VisualAcuityMeasurementsStorage === SOPClassUID
+  ) {
+    naturalizedName = 'VisualAcuityMeasurements';
+  } else if (
+    sopClassDictionary.SpectaclePrescriptionReportStorage === SOPClassUID
+  ) {
+    naturalizedName = 'SpectaclePrescriptionReport';
+  } else if (
+    sopClassDictionary.OphthalmicAxialMeasurementsStorage === SOPClassUID
+  ) {
+    naturalizedName = 'OphthalmicAxialMeasurements';
+  } else if (
+    sopClassDictionary.IntraocularLensCalculationsStorage === SOPClassUID
+  ) {
+    naturalizedName = 'IntraocularLensCalculations';
+  } else if (
+    sopClassDictionary.MacularGridThicknessandVolumeReport === SOPClassUID
+  ) {
+    naturalizedName = 'MacularGridThicknessandVolume';
+  } else if (
+    sopClassDictionary.OphthalmicVisualFieldStaticPerimetryMeasurementsStorage ===
+    SOPClassUID
+  ) {
+    naturalizedName = 'OphthalmicVisualFieldStaticPerimetryMeasurements';
+  } else if (sopClassDictionary.OphthalmicThicknessMapStorage === SOPClassUID) {
+    naturalizedName = 'OphthalmicThicknessMap';
+  } else if (sopClassDictionary.CornealTopographyMapStorage === SOPClassUID) {
+    naturalizedName = 'CornealTopographyMap';
+  } else if (sopClassDictionary.BasicTextSR === SOPClassUID) {
+    naturalizedName = 'BasicTextSR';
+  } else if (sopClassDictionary.EnhancedSR === SOPClassUID) {
+    naturalizedName = 'EnhancedSR';
+  } else if (sopClassDictionary.ComprehensiveSR === SOPClassUID) {
+    naturalizedName = 'ComprehensiveSR';
+  } else if (sopClassDictionary.Comprehensive3DSR === SOPClassUID) {
+    naturalizedName = 'Comprehensive3DSR';
+  } else if (sopClassDictionary.ProcedureLog === SOPClassUID) {
+    naturalizedName = 'ProcedureLog';
+  } else if (sopClassDictionary.MammographyCADSR === SOPClassUID) {
+    naturalizedName = 'MammographyCADSR';
+  } else if (sopClassDictionary.KeyObjectSelection === SOPClassUID) {
+    naturalizedName = 'KeyObject';
+  } else if (sopClassDictionary.ChestCADSR === SOPClassUID) {
+    naturalizedName = 'ChestCADSR';
+  } else if (sopClassDictionary.XRayRadiationDoseSR === SOPClassUID) {
+    naturalizedName = 'XRayRadiationDoseSR';
+  } else if (
+    sopClassDictionary.RadiopharmaceuticalRadiationDoseSR === SOPClassUID
+  ) {
+    naturalizedName = 'RadiopharmaceuticalRadiationDoseSR';
+  } else if (sopClassDictionary.ColonCADSR === SOPClassUID) {
+    naturalizedName = 'ColonCADSR';
+  } else if (
+    sopClassDictionary.ImplantationPlanSRDocumentStorage === SOPClassUID
+  ) {
+    naturalizedName = 'ImplantationPlanSRDocument';
+  } else if (sopClassDictionary.EncapsulatedPDFStorage === SOPClassUID) {
+    naturalizedName = 'EncapsulatedPDF';
+  } else if (sopClassDictionary.EncapsulatedCDAStorage === SOPClassUID) {
+    naturalizedName = 'EncapsulatedCDA';
+  } else if (sopClassDictionary.BasicStructuredDisplayStorage === SOPClassUID) {
+    naturalizedName = 'BasicStructuredDisplay';
+  } else if (sopClassDictionary.RTDoseStorage === SOPClassUID) {
+    naturalizedName = 'RTDose';
+  } else if (sopClassDictionary.RTStructureSetStorage === SOPClassUID) {
+    naturalizedName = 'RTStructureSet';
+  } else if (sopClassDictionary.RTBeamsTreatmentRecordStorage === SOPClassUID) {
+    naturalizedName = 'RTBeamsTreatmentRecord';
+  } else if (sopClassDictionary.RTPlanStorage === SOPClassUID) {
+    naturalizedName = 'RTPlan';
+  } else if (
+    sopClassDictionary.RTBrachyTreatmentRecordStorage === SOPClassUID
+  ) {
+    naturalizedName = 'RTBrachyTreatmentRecord';
+  } else if (
+    sopClassDictionary.RTTreatmentSummaryRecordStorage === SOPClassUID
+  ) {
+    naturalizedName = 'RTTreatmentSummaryRecord';
+  } else if (sopClassDictionary.RTIonPlanStorage === SOPClassUID) {
+    naturalizedName = 'RTIonPlan';
+  } else if (
+    sopClassDictionary.RTIonBeamsTreatmentRecordStorage === SOPClassUID
+  ) {
+    naturalizedName = 'RTIonBeamsTreatmentRecord';
+  } else if (
+    sopClassDictionary.RTBeamsDeliveryInstructionStorage === SOPClassUID
+  ) {
+    naturalizedName = 'RTBeamsDeliveryInstruction';
+  } else if (sopClassDictionary.GenericImplantTemplateStorage === SOPClassUID) {
+    naturalizedName = 'GenericImplantTemplate';
+  } else if (
+    sopClassDictionary.ImplantAssemblyTemplateStorage === SOPClassUID
+  ) {
+    naturalizedName = 'ImplantAssemblyTemplate';
+  } else if (sopClassDictionary.ImplantTemplateGroupStorage === SOPClassUID) {
+    naturalizedName = 'ImplantTemplateGroup';
+  }
+
+  return naturalizedName;
+};

platform/ui/.env

@@ -1,8 +1,5 @@
 ####
 ##
-## We need to pin WebPack's version for docz to work. See this issue:
-## https://github.com/pedronauck/docz/issues/704#issuecomment-480295032
-##
 ## react-scripts checks that dependency versions match before running
 ## Our top level webpack version causes the preflight check to fail
 ## This prevents that check

platform/ui/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.10.9](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.10.8...@ohif/ui@1.10.9) (2022-06-29)
+
+**Note:** Version bump only for package @ohif/ui
+
+
+
+
+
+## [1.10.8](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.10.7...@ohif/ui@1.10.8) (2022-04-06)
+
+**Note:** Version bump only for package @ohif/ui
+
+
+
+
+
+## [1.10.7](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.10.6...@ohif/ui@1.10.7) (2022-03-14)
+
+
+### Bug Fixes
+
+* remove docz + node version fix on docker ([#2743](https://github.com/OHIF/Viewers/issues/2743)) ([7164d1a](https://github.com/OHIF/Viewers/commit/7164d1a654571af99c22d2684e56cbdde05b2222))
+
+
+
+
+
 ## [1.10.6](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.10.5...@ohif/ui@1.10.6) (2022-02-03)
 
 **Note:** Version bump only for package @ohif/ui

platform/ui/doczrc.js

@@ -1,75 +0,0 @@
-/**
- * Docz Configuration File:
- * https://www.docz.site/docs/project-configuration
- */
-
-import { css } from "docz-plugin-css";
-
-export default {
-  dest: "example/build",
-  public: "/public",
-  wrapper: "src/__docs__/wrapper",
-  indexHtml: "src/__docs__/index.html",
-  // Limited support for importing `.styl` files
-  codeSandbox: false,
-  // https://github.com/pedronauck/docz/pull/849/files
-  // Because we re-export using `index.js` files
-  notUseSpecifiers: true,
-  menu: [
-    "Introduction",
-    "Getting Started",
-    { name: "Elements", menu: ["Form / Select"] },
-    {
-      name: "Components",
-      menu: [
-        "CINE Dialog",
-        "Layout Button",
-        "Measurement Table",
-        "Overlay Trigger",
-        "Quick Switch",
-        "Rounded Button Group",
-        "Select Tree",
-        "Simple Dialog",
-        "Study Browser",
-        "Study List",
-        "Table List",
-        "Toolbar Section",
-        "About Modal",
-        "User Preferences Modal"
-      ]
-    },
-    "Styling & Theming",
-    "Translating",
-    "Compatibility"
-  ],
-  // Rollup Aliases?
-  // https://github.com/pedronauck/docz/issues/373
-  plugins: [
-    // CSS
-    css(),
-    // Stylus
-    css({
-      preprocessor: "stylus",
-      cssmodules: false
-    })
-  ],
-  // `docz` uses file-loader to pull in SVGs. This kills our icons before
-  // They can be picked up by our `babel-plugin-inline-react-svg` dependency
-  // You can see where it's configured here:
-  // https://github.com/pedronauck/docz/blob/f72624d0aa5231dab17e1770e8d36be920f590a2/core/docz-core/src/bundler/loaders.ts#L135-L144
-  // How we delete our rule:
-  // https://github.com/neutrinojs/webpack-chain/issues/48
-  onCreateWebpackChain: config => {
-    config.module.rules.delete("svg");
-  },
-  modifyBabelRc: babelrc => {
-    const newBabelRc = {
-      ...babelrc,
-      plugins: [
-        ...babelrc.plugins,
-        require.resolve("babel-plugin-inline-react-svg")
-      ]
-    };
-    return newBabelRc;
-  }
-};

platform/ui/gatsby-node.js

@@ -1,25 +0,0 @@
-const path = require('path');
-// ~~ Plugins
-const PnpWebpackPlugin = require(`pnp-webpack-plugin`); // Required until Webpack@5
-
-exports.onCreateWebpackConfig = args => {
-  args.actions.setWebpackConfig({
-    node: { fs: 'empty' },
-    resolve: {
-      plugins: [PnpWebpackPlugin],
-      // Note the '..' in the path because docz gatsby project lives in the '.docz' directory
-      modules: [
-        // platform/ui
-        path.resolve(__dirname, '../node_modules'),
-        // .docz
-        'node_modules',
-      ],
-      // resolve: {
-      //   symlinks: true,
-      // },
-    },
-    resolveLoader: {
-      plugins: [PnpWebpackPlugin.moduleLoader(module)],
-    },
-  });
-};

platform/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/ui",
-  "version": "1.10.6",
+  "version": "1.10.9",
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -20,9 +20,8 @@
     "README.md"
   ],
   "scripts": {
-    "dev": "docz dev",
+    "dev": "echo \"No dev script yet\" && exit 0",
     "dev:ui": "yarn run dev",
-    "docs": "docz build",
     "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
     "build:package": "yarn run build",
     "prepublishOnly": "yarn run build",
@@ -64,10 +63,6 @@
   "devDependencies": {
     "@mdx-js/tag": "^0.20.3",
     "autoprefixer": "^9.6.0",
-    "docz": "1.2.0",
-    "docz-core": "1.2.0",
-    "docz-plugin-css": "0.11.0",
-    "docz-theme-default": "1.2.0",
     "lodash.clonedeep": "^4.5.0",
     "react-powerplug": "1.0.0"
   }

platform/ui/src/__docs__/NameSpace.js

@@ -1,17 +0,0 @@
-import React, { Fragment } from 'react';
-import { Link } from 'docz';
-import PropTypes from 'prop-types';
-
-const NameSpace = ({ name }) => (
-  <Fragment>
-    The namespace used on this component was: <pre>{name}</pre> Check the{' '}
-    <Link to="/translating#how-to-translate-components">translation docs</Link>{' '}
-    to see how to override it.
-  </Fragment>
-);
-
-NameSpace.propTypes = {
-  name: PropTypes.string.isRequired,
-};
-
-export default NameSpace;

platform/ui/src/__docs__/compatibility.mdx

@@ -1,15 +0,0 @@
----
-name: Compatibility
-route: /compatibility
----
-
-# Compatibility
-
-## Browser Support
-
-`@ohif/ui` relies on
-[browsers supported by Styled Components](https://www.styled-components.com/docs/faqs#which-browsers-are-supported)
-or browsers supported by emotion.
-
-Supported Browsers: IE11, IE 9+ (with Map + Set polyfills), Chrome, Firefox (and
-derivatives), Edge, and Safari.

platform/ui/src/__docs__/docs-settings.mdx

@@ -1,13 +0,0 @@
----
-name: Docs Settings
-route: /docs-settings
----
-
-import LanguageSwitcher from '../components/languageSwitcher';
-
-# Components Language
-
-You can change the language of the components displayed in this documentation by
-choosing an option in the selector below:
-
-<LanguageSwitcher />

platform/ui/src/__docs__/getting-started.mdx

@@ -1,76 +0,0 @@
----
-name: Getting Started
-route: /getting-started
----
-
-# Getting Started
-
-## Installation
-
-> This component library is pre- v1.0. All realeases until a v1.0 have the
-> possibility of introducing breaking changes. Please depend on an "exact"
-> version in your projects to prevent issues caused by loose versioning.
-
-Install `@ohif/ui` from npm:
-
-```shell
-// with npm
-npm i @ohif/ui --save-exact
-
-// with yarn
-yarn add @ohif/ui --exact
-```
-
-## Usage
-
-There is some setup required for `@ohif/ui`. We are working to eliminate these
-requirements with the goal of providing ready to use components.
-
-### External Dependencies
-
-We have tried to keep the number of external dependencies limited to make setup
-as easy as possible. You will, however, need to include either the default font
-or the font you set for your theme:
-
-```js
-// Google Fonts, Roboto
-'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap';
-```
-
-`@ohif/ui` also looks for theme CSS variabled defined on `:root`. You can find a
-list of variables [on the theming page](/styling-and-theming)
-
-### Import & Use
-
-You can use components in your React app:
-
-```js
-import React, { Component } from 'react';
-import { LayoutButton } from '@ohif/ui';
-
-class Example extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      selectedCell: {
-        className: 'hover',
-        col: 1,
-        row: 1,
-      },
-    };
-  }
-
-  render() {
-    return (
-      <LayoutButton
-        selectedCell={this.state.selectedCell}
-        onChange={cell => this.setState({ selectedCell: cell })}
-      />
-    );
-  }
-}
-```
-
-> NOTE: It is heavily recommended that you use a CSS reset or normalize. As well
-> as the following style: `* { Box-sizing: Border-box }`

platform/ui/src/__docs__/index.html

@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ lang }}">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="description" content="{{ description }}">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-
-  <title>{{ title }}</title>
-
-  <!-- Latest compiled and minified CSS -->
-  <link rel="stylesheet" href="/public/docz.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap">
-
-  <style>
-    /* "Tide" theme */
-    /* TODO:
-    - Convert the other themes to CSS Variables
-    - Allow user to set default CSS theme in JS config
-    - Export the themes as identical JS objects
-    - For theme switcher, update root-level CSS properties via JS (https://medium.com/@_bengarrison/accessing-and-modifying-css-variables-with-javascript-2ccb735bbff0)
-    */
-    :root {
-      /* Interface UI Colors */
-      --default-color: #9CCEF9;
-      --hover-color: #ffffff;
-      --active-color: #20A5D6;
-      --ui-border-color: #44626F;
-      --ui-border-color-dark: #3C5D80;
-      --ui-border-color-active: #00a4d9;
-      --primary-background-color: #000000;
-      --box-background-color: #3E5975;
-
-      --text-primary-color: #ffffff;
-      --text-secondary-color: #91B9CD;
-      --input-background-color: #2c363f;
-      --input-placeholder-color: #d3d3d3;
-
-      --table-hover-color: #2c363f;
-      --table-text-primary-color: #ffffff;
-      --table-text-secondary-color: #91b9cd;
-
-      --large-numbers-color: #6FBDE2;
-
-      --state-error: #FFCCCC;
-      --state-error-border: #FFCCCC;
-      --state-error-text: #FFCCCC;
-
-      /* Common palette */
-      --ui-yellow: #E29E4A;
-      --ui-sky-blue: #6FBDE2;
-      /* State palette */
-      --ui-state-error: #FFCCCC;
-      --ui-state-error-border: #993333;
-      --ui-state-error-text: #661111;
-      --ui-gray-lighter: #436270;
-      --ui-gray-light: #516873;
-      --ui-gray: #263340;
-      --ui-gray-dark: #16202B;
-      --ui-gray-darker: #151A1F;
-      --ui-gray-darkest: #14202A;
-
-      --calendar-day-color: #d3d3d3;
-      --calendar-day-border-color: #d3d3d3;
-      --calendar-day-active-hover-background-color: #516873;
-      --calendar-main-color: #263340;
-      --viewport-border-thickness: 1px;
-    }
-
-    body {
-      font-family: 'Roboto', sans-serif !important;
-    }
-  </style>
-  {{ head }}
-</head>
-
-<body>
-  <div id="root" />
-  {{ footer }}
-</body>
-
-</html>

platform/ui/src/__docs__/introduction.mdx

@@ -1,76 +0,0 @@
----
-name: Introduction
-route: /
----
-
-import { Playground, Props } from 'docz';
-import { State } from 'react-powerplug';
-import { TableList, TableListItem } from './../index.js';
-
-# Introduction
-
-**@ohif/ui is a collection of components and utilities** that power OHIF's
-[zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
-([demo][demo-url]). We maintain them as a separate component library to:
-
-- Decouple presentation from business logic
-- Test and develop components in isolation
-- Provide well documented, reusable components
-- Aid rapid application development for context specific viewers
-
-## Quick Example
-
-> This component library is pre- v1.0. All realeases until a v1.0 have the
-> possibility of introducing breaking changes. Please depend on an "exact"
-> version in your projects to prevent issues caused by loose versioning.
-
-```js
-// Add '@ohif/ui' as a dependency
-yarn add @ohif/ui
-
-// Import and use components
-import { TableList } from '@ohif/ui'
-```
-
-<Playground>
-  <State
-    initial={{
-      selectedIndex: null,
-      listItems: [
-        { label: 'Brain Left' },
-        { label: 'Brain Right' },
-        { label: 'Heart Left' },
-        { label: 'Heart Right' },
-      ],
-    }}
-  >
-    {({ state, setState }) => (
-      <TableList headerTitle="Example Table List Header">
-        {state.listItems.map((item, index) => {
-          return (
-            <TableListItem
-              key={`item_${index}`}
-              itemClass={state.selectedIndex === index ? 'selected' : ''}
-              itemIndex={index}
-              onItemClick={() => alert('item clicked')}
-            >
-              <label>{item.label}</label>
-            </TableListItem>
-          );
-        })}
-      </TableList>
-    )}
-  </State>
-</Playground>
-
-## FAQ
-
-...
-
-<!--
-  Links
-  -->
-
-<!-- prettier-ignore-start -->
-[demo-url]: https://docs.ohif.org/demo/
-<!-- prettier-ignore-end -->

platform/ui/src/__docs__/styling-and-theming.mdx

@@ -1,56 +0,0 @@
----
-name: Styling & Theming
-route: /styling-and-theming
----
-
-# Styling & Theming
-
-```css
-:root {
-  /* Interface UI Colors */
-  --default-color: #9ccef9;
-  --hover-color: #ffffff;
-  --active-color: #20a5d6;
-  --ui-border-color: #44626f;
-  --ui-border-color-dark: #3c5d80;
-  --ui-border-color-active: #00a4d9;
-  --primary-background-color: #000000;
-  --box-background-color: #3e5975;
-
-  --text-primary-color: #ffffff;
-  --text-secondary-color: #91b9cd;
-  --input-background-color: #2c363f;
-  --input-placeholder-color: #d3d3d3;
-
-  --table-hover-color: #2c363f;
-  --table-text-primary-color: #ffffff;
-  --table-text-secondary-color: #91b9cd;
-
-  --large-numbers-color: #6fbde2;
-
-  --state-error: #ffcccc;
-  --state-error-border: #ffcccc;
-  --state-error-text: #ffcccc;
-
-  /* Common palette */
-  --ui-yellow: #e29e4a;
-  --ui-sky-blue: #6fbde2;
-
-  /* State palette */
-  --ui-state-error: #ffcccc;
-  --ui-state-error-border: #993333;
-  --ui-state-error-text: #661111;
-  --ui-gray-lighter: #436270;
-  --ui-gray-light: #516873;
-  --ui-gray: #263340;
-  --ui-gray-dark: #16202b;
-  --ui-gray-darker: #151a1f;
-  --ui-gray-darkest: #14202a;
-
-  --calendar-day-color: #d3d3d3;
-  --calendar-day-border-color: #d3d3d3;
-  --calendar-day-active-hover-background-color: #516873;
-  --calendar-main-color: #263340;
-  --viewport-border-thickness: 1px;
-}
-```

platform/ui/src/__docs__/translating.mdx

@@ -1,87 +0,0 @@
----
-name: Translating
-route: /translating
----
-
-# Translating
-
-**React Viewerbase** supports internationalization using
-[i18next](https://www.i18next.com/) through the npm package
-[@ohif/i18n](https://www.npmjs.com/package/@ohif/i18n), where is the main
-instance of i18n containing several languages and tools.
-
-## How to translate components
-
-All you need is to use the internal custom superset of
-[withTranslation HOC](https://react.i18next.com/latest/withtranslation-hoc),
-available at `src/utils/LanguageProvider.js`
-
-e.g.:
-
-```js
-import React from 'react';
-import { withTranslation } from '../utils/LanguageProvider.js';
-
-function MyComponent({ t }) {
-  return <p>{t('my translated text')}</p>;
-}
-
-export default withTranslation('MyNameSpace')(MyComponent);
-```
-
----
-
-## Namespaces
-
-For further information about namespaces and how they work, please visit
-[OHIF Namespaces docs](https://docs.ohif.org/viewer/internationalization.html#namespaces).
-
-### How to get right the Namespace of a `@ohif/ui` component?
-
-Check the component's page in this site, the Namespace information should be on
-the bottom line.
-
-Also, a nameSpace is defined when exporting a component, this information can be
-found on exports trough the code, in case of missing in docs.
-
-E.g.
-
-```
-export default withTranslation('TheNamespaceYouAreLookingFor')(TheComponentYouWantToUse);
-```
-
-### How to use another Namespace inside the current Namespace?
-
-i18next provides a parsing feature able to get translations strings from any
-Namespace, like this following example getting data from `InnerSpace` Namespace:
-
-```
-$t(InnerSpace:Reset)
-export default withTranslation('OuterSpace')(TheComponent);
-```
-
----
-
-## I18next Provider
-
-**@ohif/ui** pass down the `t` function trough the custom
-[withTranslation HOC](https://github.com/OHIF/Viewers/blob/master/platform/ui/src/utils/LanguageProvider.js).
-
----
-
-## Extending and Overriding languages
-
-[How to Extend languages with @ohif/i18n](https://docs.ohif.org/viewer/internationalization.html#extending-languages-in-ohifi18n)
-
-## Changing the language
-
-The language choosing method is the same implemented in
-[OHIF Viewers](https://docs.ohif.org/viewer/internationalization.html#changing-the-language)
-
-> You can also change the language of the components displayed in this
-> documentation by choosing an option in the
-> [Docs Settings](https://react.ohif.org/docs-settings) section.
-
-## Debugging translations
-
-[How to Debug @ohif/i18n](https://docs.ohif.org/viewer/internationalization.html#debugging-translations)

platform/ui/src/__docs__/wrapper.js

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import PropTypes from 'prop-types';
-import LanguageSwitcher from '../components/languageSwitcher';
-
-import './wrapper.styl';
-
-const Wrapper = ({ children }) => (
-  <React.Fragment>
-    <div className="sidebarLanguageSwitcher">
-      <strong>Display components in:</strong>
-      <LanguageSwitcher />
-    </div>
-    {children}
-  </React.Fragment>
-);
-
-Wrapper.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default Wrapper;

platform/ui/src/__docs__/wrapper.styl

@@ -1,15 +0,0 @@
-[class*="Sidebar__Menus"]
-  @media (min-width: 1120px)
-    margin-top: 80px
-
-.sidebarLanguageSwitcher
-  position: fixed
-  top: 155px
-  left 0
-  z-index: 1049
-  padding: 0 24px 20px
-  border-bottom: 1px dotted #CED4DE
-  background: #F5F6F7
-  transition: all 200ms ease
-  @media (max-width: 1119px)
-    left -100%

platform/ui/src/components/checkbox/__docs__/checkbox.mdx

@@ -1,42 +0,0 @@
----
-name: Checkbox
-menu: Elements
-route: /components/checkbox
----
-
-import { Playground, Props } from 'docz'
-import { State } from 'react-powerplug'
-import { Checkbox } from './../index'
-import NameSpace from '../../../__docs__/NameSpace'
-
-# Checkbox
-
-## Basic usage
-
-<Playground>
-  <State
-    initial={{
-      checked : false,
-      label : 'Sample check'
-    }}
-  >
-    {({ state, setState }) => (
-      <React.Fragment>
-        <div>
-          <pre>{JSON.stringify(state, null, 2)}</pre>
-        </div>
-        <div style={{ maxWidth: '300px', margin: '0 auto' }}>
-          <Checkbox {...state} />
-        </div>
-      </React.Fragment>
-    )}
-  </State>
-</Playground>
-
-## API
-
-<Props of={Checkbox} />
-
-## Translation Namespace
-
-<NameSpace name="Checkbox" />

platform/ui/src/components/cineDialog/__docs__/cineDialog.mdx

@@ -1,57 +0,0 @@
----
-name: CINE Dialog
-menu: Components
-route: /components/cine-dialog
----
-
-import { Playground, Props } from 'docz'
-import { State } from 'react-powerplug'
-import { CineDialog } from './../index'
-import NameSpace from '../../../__docs__/NameSpace'
-
-# CINE Dialog
-
-## Basic usage
-
-<Playground>
-  <State
-    initial={{
-      isPlaying: false,
-      cineFrameRate: 24,
-      isLoopEnabled: true,
-      lastChange: '',
-    }}
-  >
-    {({ state, setState }) => (
-      <React.Fragment>
-        <div>
-          <pre>{JSON.stringify(state, null, 2)}</pre>
-        </div>
-        <div style={{ maxWidth: '300px', margin: '0 auto' }}>
-          <CineDialog
-            {...state}
-            onClickSkipToStart={() =>
-              setState({ lastChange: 'Clicked SkipToStart' })
-            }
-            onClickSkipToEnd={() =>
-              setState({ lastChange: 'Clicked SkipToEnd' })
-            }
-            onClickNextButton={() => setState({ lastChange: 'Clicked Next' })}
-            onClickBackButton={() => setState({ lastChange: 'Clicked Back' })}
-            onLoopChanged={value => setState({ isLoopEnabled: value })}
-            onFrameRateChanged={value => setState({ cineFrameRate: value })}
-            onPlayPauseChanged={() => setState({ isPlaying: !state.isPlaying })}
-          />
-        </div>
-      </React.Fragment>
-    )}
-  </State>
-</Playground>
-
-## API
-
-<Props of={CineDialog} />
-
-## Translation Namespace
-
-<NameSpace name="CineDialog" />

platform/ui/src/components/content/aboutContent/__docs__/about.mdx

@@ -1,42 +0,0 @@
----
-name: About Modal
-menu: Components
-route: /components/about-modal
----
-
-import { Playground, Props } from 'docz'
-import { State } from 'react-powerplug'
-import { AboutContent } from './../index.js'
-
-# About  Modal
-
-## Basic usage
-
-<Playground>
-    <State initial={{
-        isOpen: false
-    }}>
-
-        {({ state, setState }) => (
-            <React.Fragment>
-                <button
-                    className="btn btn-primary"
-                    type="button"
-                    onClick={ () => setState({ isOpen: true }) }
-                >
-                    Open about modal
-                </button>
-                <AboutContent
-                    {...state}
-                    onCancel={() => setState({ isOpen: false })}
-                />
-            </React.Fragment>
-        )}
-
-    </State>
-
-</Playground>
-
-## API
-
-<Props of={AboutContent} />

platform/ui/src/components/content/viewportDownloadForm/__docs__/viewportDownloadForm.mdx

@@ -1,39 +0,0 @@
----
-name: Viewport Download Form
-menu: Components
-route: /components/viewport-download-form
----
-
-import { Playground, Props } from 'docz'
-import { State } from 'react-powerplug'
-import { ViewportDownloadForm } from './../index'
-import NameSpace from '../../../__docs__/NameSpace'
-
-# Viewport Download Form
-
-## Basic usage
-
-<Playground>
-  <State
-    initial={{}}
-  >
-    {({ state, setState }) => (
-      <React.Fragment>
-        <div>
-          <pre>{JSON.stringify(state, null, 2)}</pre>
-        </div>
-        <div style={{ maxWidth: '400px', margin: '0 auto' }}>
-          <ViewportDownloadForm />
-        </div>
-      </React.Fragment>
-    )}
-  </State>
-</Playground>
-
-## API
-
-<Props of={ViewportDownloadForm} />
-
-## Translation Namespace
-
-<NameSpace name="ViewportDownloadForm" />

platform/ui/src/components/layoutButton/__docs__/layoutButton.css

@@ -1,10 +0,0 @@
-.LayoutExample {
-  background-color: var(--primary-background-color);
-  width: 160px;
-  height: 160px;
-}
-
-.GridLayout td {
-  padding: 5px;
-  border: 1px solid black;
-}

platform/ui/src/components/layoutButton/__docs__/layoutButton.mdx

@@ -1,49 +0,0 @@
----
-name: Layout Button
-menu: Components
-route: /components/layout-button
----
-
-import { Playground, Props } from 'docz'
-import { State } from 'react-powerplug'
-import { LayoutButton } from './../index.js'
-import './layoutButton.css'
-import NameSpace from '../../../__docs__/NameSpace'
-
-# Layout Button
-
-## Basic usage
-
-<Playground>
-    <State initial={{
-        selectedCell: {
-            className: 'hover',
-            col: 1,
-            row: 1
-        },
-    }}>
-        {({ state, setState }) => (
-            <React.Fragment>
-                {/* STATE */}
-                <div><pre>{JSON.stringify(state, null, 2) }</pre></div>
-
-                {/* COMPONENT */}
-                <div className="LayoutExample">
-                    <LayoutButton
-                        {...state}
-                        onChange={cell => setState({ selectedCell: cell })}
-                    />
-                </div>
-            </React.Fragment>
-        )}
-    </State>
-
-</Playground>
-
-## API
-
-<Props of={LayoutButton} />
-
-## Translation Namespace
-
-<NameSpace name="Buttons" />

platform/ui/src/components/measurementTable/MeasurementTableItem.js

@@ -9,6 +9,14 @@ import { TableListItem } from './../tableList/TableListItem.js';
 
 import './MeasurementTableItem.styl';
 
+const ColoredCircle = ({ color }) => {
+  return <div className="item-color" style={{ backgroundColor: color }}></div>;
+};
+
+ColoredCircle.propTypes = {
+  color: PropTypes.string.isRequired,
+};
+
 class MeasurementTableItem extends Component {
   static propTypes = {
     measurementData: PropTypes.object.isRequired,
@@ -21,6 +29,14 @@ class MeasurementTableItem extends Component {
     t: PropTypes.func,
   };
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      collapsed: true,
+      visible: true,
+    };
+  }
+
   render() {
     const {
       warningTitle = '',
@@ -93,27 +109,113 @@ class MeasurementTableItem extends Component {
       actionButtons.push(deleteButton);
     }
 
-    return (
+    if (
-      <TableListItem
+      this.props.measurementData.isSRText === true &&
-        itemKey={this.props.measurementData.measurementNumber}
+      this.props.measurementData.labels &&
-        itemClass={`measurementItem ${this.props.itemClass} ${hasWarningClass}`}
+      this.props.measurementData.labels.length > 0
-        itemIndex={this.props.itemIndex}
+    ) {
-        onItemClick={this.onItemClick}
+      return (
-      >
+        <React.Fragment>
-        <div>
+          <TableListItem
-          <div className="measurementLocation">
+            key={this.props.measurementData.measurementNumber}
-            {this.props.t(this.props.measurementData.label, {
+            itemKey={this.props.measurementData.measurementNumber}
-              keySeparator: '>',
+            itemClass={`measurementItem ${this.props.itemClass} ${hasWarningClass}`}
-              nsSeparator: '|',
+            itemIndex={this.props.itemIndex}
+            onItemClick={this.onItemClick}
+          >
+            <div>
+              <div className="measurementLocation">
+                {this.props.t(this.props.measurementData.label, {
+                  keySeparator: '>',
+                  nsSeparator: '|',
+                })}
+              </div>
+            </div>
+            <div className="icons">
+              <div className="displayTexts">{this.getDataDisplayText()}</div>
+              <Icon
+                className={`eye-icon`}
+                name={this.state.visible ? 'eye' : 'eye-closed'}
+                width="20px"
+                height="20px"
+                onClick={() => {
+                  this.props.measurementData.labels.forEach(label => {
+                    label.visible = !this.state.visible;
+                  });
+
+                  this.setState({
+                    visible: !this.state.visible,
+                  });
+                }}
+              />
+              <Icon
+                className={`angle-double-${
+                  this.state.collapsed ? 'down' : 'up'
+                }`}
+                name={`angle-double-${this.state.collapsed ? 'down' : 'up'}`}
+                width="20px"
+                height="20px"
+                onClick={() => {
+                  this.setState({
+                    collapsed: !this.state.collapsed,
+                  });
+                }}
+              />
+            </div>
+          </TableListItem>
+          {this.state.collapsed &&
+            this.props.measurementData.labels.map((SRLabel, index) => {
+              return (
+                <TableListItem
+                  key={index}
+                  itemKey={index}
+                  itemMeta={<ColoredCircle color={SRLabel.color} />}
+                  itemMetaClass="item-color-section"
+                  onItemClick={this.onItemClick}
+                >
+                  <div>
+                    <div className="icons">
+                      <span>{SRLabel.label + ' : ' + SRLabel.value}</span>
+                      <Icon
+                        className={`eye-icon`}
+                        name={SRLabel.visible ? 'eye' : 'eye-closed'}
+                        width="20px"
+                        height="20px"
+                        onClick={() => {
+                          SRLabel.visible = !SRLabel.visible;
+                        }}
+                      />
+                    </div>
+                  </div>
+                </TableListItem>
+              );
             })}
+        </React.Fragment>
+      );
+    } else {
+      return (
+        <TableListItem
+          key={this.props.measurementData.measurementNumber}
+          itemKey={this.props.measurementData.measurementNumber}
+          itemClass={`measurementItem ${this.props.itemClass} ${hasWarningClass}`}
+          itemIndex={this.props.itemIndex}
+          onItemClick={this.onItemClick}
+        >
+          <div>
+            <div className="measurementLocation">
+              {this.props.t(this.props.measurementData.label, {
+                keySeparator: '>',
+                nsSeparator: '|',
+              })}
+            </div>
+            <div className="displayTexts">{this.getDataDisplayText()}</div>
+            {!this.props.measurementData.isReadOnly && (
+              <div className="rowActions">{actionButtons}</div>
+            )}
           </div>
-          <div className="displayTexts">{this.getDataDisplayText()}</div>
+        </TableListItem>
-          {!this.props.measurementData.isReadOnly && (
+      );
-            <div className="rowActions">{actionButtons}</div>
+    }
-          )}
-        </div>
-      </TableListItem>
-    );
   };
 
   onItemClick = event => {

platform/ui/src/components/measurementTable/MeasurementTableItem.styl

@@ -1,4 +1,16 @@
 .measurementItem
+  .item-color-section
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+ .item-color
+    margin-top: 8px;
+    border-radius: 100%;
+    width: 20px;
+    height: 20px;
+
   .rowActions
       margin-left: -1px;
       background-color: var(--ui-gray-darker)
@@ -63,3 +75,16 @@
         width: 22px;
         height: 20px;
         pointer-events: inherit;
+
+.icons
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+
+.icons .eye-icon
+  margin-left: 100px;
+  margin-right: -5px;
+.icons .angle-double-down
+.icons .angle-double-up
+  margin-left: 15px;
+  margin-right: -5px;

platform/ui/src/components/measurementTable/__docs__/measurementTable.mdx

@@ -1,49 +0,0 @@
----
-name: Measurement Table
-menu: Components
-route: /components/measurement-table
----
-
-import { Playground, Props } from 'docz'
-import { State } from 'react-powerplug'
-import { MeasurementTable } from './../index.js'
-import NameSpace from '../../../__docs__/NameSpace'
-//
-import measurements from './measurements.js'
-import timepoints from './timepoints.js'
-import warnings from './warnings.js'
-
-# Measurement Table
-
-## Basic usage
-
-<Playground>
-  <State
-    initial={{
-      // Spelling error: overwallWarnings
-      overwallWarnings: warnings,
-      timepoints,
-      measurementCollection: measurements,
-    }}
-  >
-    {({ state, setState }) => (
-      <div style={{ height: '340px' }}>
-        <MeasurementTable
-          {...state}
-          onItemClick={() => alert('onItemClick')}
-          onRelabelClick={() => alert('onRelabelClick')}
-          onDeleteClick={() => alert('onDeleteClick')}
-          onEditDescriptionClick={() => alert('onEditDescriptionClick')}
-        />
-      </div>
-    )}
-  </State>
-</Playground>
-
-## API
-
-<Props of={MeasurementTable} />
-
-## Translation Namespace
-
-<NameSpace name="MeasurementTable" />

platform/ui/src/components/measurementTable/__docs__/measurements.js

@@ -1,93 +0,0 @@
-export default [
-  {
-    maxMeasurements: 5,
-    groupName: 'Targets',
-    measurements: [
-      {
-        measurementId: '123',
-        measurementNumber: '123',
-        itemNumber: 1,
-        label: 'Chest Wall Posterior',
-        hasWarnings: true,
-        warningTitle: 'Criteria nonconformities',
-        isSplitLesion: false,
-        warningList: [
-          'All measurements should have a location',
-          'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
-        ],
-        data: [
-          {
-            displayText: '25.7 x 12.9',
-          },
-          {
-            displayText: '24.7 x 11.5',
-          },
-          {},
-        ],
-      },
-      {
-        measurementId: '124',
-        measurementNumber: '124',
-        itemNumber: 2,
-        label: 'Bone Extremity',
-        data: [
-          {
-            displayText: '24.7 x 11.1',
-          },
-          {
-            displayText: '21.2 x 10.9',
-          },
-          {},
-        ],
-      },
-    ],
-  },
-  {
-    maxMeasurements: 3,
-    groupName: 'NonTargets',
-    measurements: [
-      {
-        measurementId: '125',
-        measurementNumber: '125',
-        itemNumber: 1,
-        label: 'Chest Wall Single Site',
-        data: [
-          {
-            displayText: 'MD',
-          },
-          {
-            displayText: 'NM',
-          },
-          {},
-        ],
-      },
-      {
-        measurementId: '126',
-        measurementNumber: '126',
-        itemNumber: 2,
-        label: 'Extremity Multiple Sites',
-        data: [
-          {
-            displayText: 'CR',
-          },
-          {},
-          {},
-        ],
-      },
-      {
-        measurementId: '127',
-        measurementNumber: '127',
-        label: 'Extremity Site',
-        data: [
-          {
-            displayText: 'CR',
-          },
-          {},
-          {
-            displayText: 'NM',
-          },
-        ],
-      },
-    ],
-  },
-];

platform/ui/src/components/measurementTable/__docs__/timepoints.js

@@ -1,14 +0,0 @@
-export default [
-  {
-    label: 'Follow-up 2',
-    date: '20-Dec-18',
-  },
-  {
-    label: 'Follow-up 1',
-    date: '15-Jun-18',
-  },
-  {
-    label: 'Baseline',
-    date: '10-Apr-18',
-  },
-];

platform/ui/src/components/measurementTable/__docs__/warnings.js

@@ -1,6 +0,0 @@
-export default {
-  warningList: [
-    'All measurements should have a location',
-    'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
-  ],
-};

platform/ui/src/components/ohifModal/__docs__/ohifModal.mdx

@@ -1,39 +0,0 @@
----
-name: OHIFModal
-menu: Components
-route: /components/ohif-modal
----
-
-import { Playground, Props } from 'docz'
-import { State } from 'react-powerplug'
-import { OHIFModal } from './../index'
-import NameSpace from '../../../__docs__/NameSpace'
-
-# OHIF Modal
-
-## Basic usage
-
-<Playground>
-  <State
-    initial={{}}
-  >
-    {({ state, setState }) => (
-      <React.Fragment>
-        <div>
-          <pre>{JSON.stringify(state, null, 2)}</pre>
-        </div>
-        <div style={{ maxWidth: '400px', margin: '0 auto' }}>
-          <OHIFModal />
-        </div>
-      </React.Fragment>
-    )}
-  </State>
-</Playground>
-
-## API
-
-<Props of={OHIFModal} />
-
-## Translation Namespace
-
-<NameSpace name="OHIFModal" />

platform/ui/src/components/overlayTrigger/__docs__/OverlayTrigger.mdx

@@ -1,84 +0,0 @@
----
-name: Overlay Trigger
-menu: Components
-route: /components/overlay-trigger
----
-
-import { Playground, Props } from 'docz'
-import { Tooltip } from './../../tooltip'
-import { OverlayTrigger } from './../index.js'
-
-# Overlay Trigger
-
-## Basic usage
-
-### On Hover
-
-<Playground>
-
-    <div style={{
-        display: 'flex',
-        justifyContent: 'space-between'
-    }}>
-        {
-        ['right', 'left', 'bottom', 'top'].map((placement) => {
-            return (
-                <React.Fragment key={`example-${placement}`}>
-                <OverlayTrigger
-                    key={`example-${placement}`}
-                    placement={placement}
-                    overlay={
-                    <Tooltip
-                        placement={placement}
-                        className='in'
-                        id={`tooltip-${placement}`}
-                    >
-                        Here I am!
-                    </Tooltip>
-                    }
-                >
-                    <button> Tooltip on {placement}</button>
-                </OverlayTrigger>
-                </React.Fragment>
-            )
-        })
-    }
-    </div>
-
-</Playground>
-
-### On Click
-
-<Playground>
-  <div
-    style={{
-      display: 'flex',
-      justifyContent: 'space-between',
-    }}
-  >
-    {['right', 'left', 'bottom', 'top'].map(placement => {
-      return (
-        <OverlayTrigger
-          key={`example-${placement}`}
-          placement={placement}
-          trigger="click"
-          overlay={
-            <Tooltip
-              placement={placement}
-              className="in"
-              id={`tooltip-${placement}`}
-            >
-              Here I am!
-            </Tooltip>
-          }
-        >
-          <button> Tooltip on {placement}</button>
-        </OverlayTrigger>
-      )
-    })}
-  </div>
-</Playground>
-
-## API
-
-<Props of={OverlayTrigger} />

platform/ui/src/components/quickSwitch/__docs__/quickSwitch.mdx

@@ -1,61 +0,0 @@
----
-name: Quick Switch
-menu: Components
-route: /components/quick-switch
----
-
-import { Playground, Props } from 'docz'
-import { State } from 'react-powerplug'
-import { QuickSwitch } from './../index.js'
-//
-import studies from './studies.js'
-
-# Quick Switch
-
-## Basic usage
-
-<Playground>
-    <State initial={{
-        studyListData: studies,
-    }}>
-        {({ state, setState }) => (
-            <QuickSwitch
-                studyListData={state.studyListData}
-                // If this is always activeStudy's thumbnails,
-                // Why do we need to specify this?
-                seriesData={
-                    state.studyListData.find((study) => {
-                        return !!study.active;
-                    }).thumbnails}
-                onSeriesSelected={(selectedSeries) => {
-                    const { studyListData } = state;
-                    const selectedId = selectedSeries.displaySetInstanceUID;
-
-                    studyListData.forEach(study => {
-                        study.thumbnails.forEach(series => {
-                            series.active = series.displaySetInstanceUID  === selectedId;
-                        })
-                    });
-
-                    setState({ studyListData });
-                }}
-                onStudySelected={(selectedStudy) => {
-                    const { studyListData } = state;
-                    const selectedId = selectedStudy.StudyInstanceUID;
-
-                    studyListData.forEach(study => {
-                        study.active = study.StudyInstanceUID === selectedId;
-                    });
-
-                    setState({ studyListData });
-                }}
-            />
-        )}
-
-    </State>
-
-</Playground>
-
-## API
-
-<Props of={QuickSwitch} />

platform/ui/src/components/quickSwitch/__docs__/studies.js

@@ -1,76 +0,0 @@
-export default [
-  {
-    StudyInstanceUID: '10001',
-    StudyDescription: 'Anti-PD-1',
-    modalities: 'CT',
-    StudyDate: '18-nov-2018',
-    active: false,
-    thumbnails: [
-      {
-        imageSrc:
-          'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_Lung.jpg',
-        SeriesDescription: 'Anti-PD-1_Lung',
-        SeriesNumber: '2',
-        numImageFrames: 512,
-        displaySetInstanceUID: '10001-1',
-        stackPercentComplete: 30,
-      },
-      {
-        imageSrc:
-          'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_MELANOMA.jpg',
-        SeriesDescription: 'Anti-PD-1_MELANOMA',
-        SeriesNumber: '2',
-        InstanceNumber: '1',
-        numImageFrames: 256,
-        displaySetInstanceUID: '10001-2',
-        stackPercentComplete: 70,
-      },
-    ],
-  },
-  {
-    StudyInstanceUID: '10002',
-    StudyDescription: 'CPTAC',
-    modalities: 'CT',
-    StudyDate: '16-aug-2017',
-    active: true,
-    thumbnails: [
-      {
-        imageSrc:
-          'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-GBM.jpg',
-        SeriesDescription: 'CPTAC-GBM',
-        active: true,
-        SeriesNumber: '2',
-        numImageFrames: 512,
-        displaySetInstanceUID: '10002-1',
-        stackPercentComplete: 100,
-      },
-      {
-        imageSrc:
-          'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-CM.jpg',
-        SeriesDescription: 'CPTAC-CM',
-        SeriesNumber: '2',
-        InstanceNumber: '1',
-        displaySetInstanceUID: '10002-2',
-        numImageFrames: 256,
-      },
-      {
-        imageSrc:
-          'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-HNSCC.jpg',
-        SeriesDescription: 'CPTAC-HNSCC',
-        SeriesNumber: '2',
-        InstanceNumber: '1',
-        displaySetInstanceUID: '10002-3',
-        numImageFrames: 256,
-      },
-      {
-        imageSrc:
-          'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-LSCC.jpg',
-        SeriesDescription: 'CPTAC-LSCC',
-        SeriesNumber: '2',
-        InstanceNumber: '1',
-        displaySetInstanceUID: '10002-4',
-        numImageFrames: 256,
-      },
-    ],
-  },
-];

platform/ui/src/components/radioButtonList/__docs__/radioButtonList.mdx

@@ -1,74 +0,0 @@
----
-name: Radio Button List
-menu: Elements
-route: /components/radio-button-list
----
-
-import { Playground, Props } from 'docz'
-import { State } from 'react-powerplug'
-import { RadioButtonList } from './../index'
-import NameSpace from '../../../__docs__/NameSpace'
-
-#Radio Button List
-
-## Basic usage
-
-<Playground>
-  <State
-    initial={{
-      description : [
-	      {
-			'label' : 'Button 1',
-			'id' : 'button1',
-			'checked' : false
-	      },
-	      {
-	      	'label' : 'Button 2',
-	      	'id' : 'button2',
-	      	'checked' : false,
-	      },
-	      {
-			'label' : 'Button 3',
-			'id' : 'button3',
-			'checked' : true,
-	      }
-      ]
-    }}
-  >
-    {({ state, setState }) => (
-      <React.Fragment>
-        <div>
-          <pre>{JSON.stringify(state, null, 2)}</pre>
-        </div>
-        <div style={{ maxWidth: '300px', margin: '0 auto' }}>
-          <RadioButtonList  description={[
-		      {
-				'label' : 'Button 1',
-				'id' : 'button1',
-				'checked' : false
-		      },
-		      {
-		      	'label' : 'Button 2',
-		      	'id' : 'button2',
-		      	'checked' : false,
-
-		      },
-		      {
-				'label' : 'Button 3',
-				'id' : 'coolButton3',
-				'checked' : true,
-		      }
-      ]}/>
-        </div>
-      </React.Fragment>
-    )}
-  </State>
-</Playground>
-
-## API
-
-<Props of={RadioButtonList} />
-
-## Translation Namespace
-
-<NameSpace name="RadioButtonList" />

platform/ui/src/components/roundedButtonGroup/__docs__/roundedButtonGroup.mdx

@@ -1,51 +0,0 @@
----
-name: Rounded Button Group
-menu: Components
-route: /components/rounded-button-group
----
-
-import { Playground, Props } from 'docz';
-import { State } from 'react-powerplug';
-import { RoundedButtonGroup } from './../index.js';
-
-# Rounded Button Group
-
-A basic styled toggle switch
-
-## Basic usage
-
-<Playground>
-  <State
-    initial={{
-      value: null,
-      options: [
-        {
-          value: 'studies',
-          icon: 'th',
-          bottomLabel: 'Series',
-        },
-        {
-          value: 'measurements',
-          icon: 'th-list',
-          bottomLabel: 'Measurements',
-        },
-      ],
-    }}
-  >
-    {({ state, setState }) => (
-      <React.Fragment>
-        <div>
-          <pre>value: {JSON.stringify(state.value, null, 2)}</pre>
-        </div>
-        <RoundedButtonGroup
-          {...state}
-          onValueChanged={value => setState({ value })}
-        />
-      </React.Fragment>
-    )}
-  </State>
-</Playground>
-
-## API
-
-<Props of={RoundedButtonGroup} />

platform/ui/src/components/selectTree/__docs__/selectTree.mdx

@@ -1,42 +0,0 @@
----
-name: Select Tree
-menu: Components
-route: /components/select-tree
----
-
-import { Playground, Props } from 'docz'
-import { State } from 'react-powerplug'
-import { SelectTree } from './../index.js'
-
-import selectTreeItems from './selectTreeItems.js'
-
-# SelectTree
-
-## Basic usage
-
-<Playground>
-    <State initial={{
-        items: selectTreeItems,
-    }}>
-        {({ state, setState }) => (
-            <React.Fragment>
-            <pre style={{ maxHeight: '135px', overflowX: 'auto' }}>
-                {JSON.stringify(state.items, null, 2)}
-            </pre>
-
-           <SelectTree
-                items={state.items}
-                onSelected={(event, item) => setState({ itemLabelSelected: item.label }) }
-                selectTreeFirstTitle="Select Tree Example Header"
-                autoFocus={false}
-            />
-            </React.Fragment>
-        )}
-
-    </State>
-
-</Playground>
-
-## API
-
-<Props of={SelectTree} />

platform/ui/src/components/selectTree/__docs__/selectTreeItems.js

@@ -1,30 +0,0 @@
-export default [
-  {
-    label: 'A',
-    value: 'A',
-    items: [
-      {
-        label: 'Abdominal Wall',
-        value: 'AbdominalWall',
-      },
-      {
-        label: 'Adrenal Left',
-        value: 'AdrenalLeft',
-      },
-    ],
-  },
-  {
-    label: 'B',
-    value: 'B',
-    items: [
-      {
-        label: 'Brain',
-        value: 'Brain',
-      },
-      {
-        label: 'Breast',
-        value: 'Breast',
-      },
-    ],
-  },
-];

platform/ui/src/components/simpleDialog/__docs__/simpleDialog.mdx

@@ -1,83 +0,0 @@
----
-name: Simple Dialog
-menu: Components
-route: /components/simple-dialog
----
-
-import { Playground, Props } from 'docz'
-import { State } from 'react-powerplug'
-import { SimpleDialog } from './../index.js'
-
-# Simple Dialog
-
-Its similar to a modal but we can pass its style as props and manipulate it as
-we want. Initially used to display tool data changes in our Viewport.
-
-## Basic usage
-
-<Playground>
-    <State initial={{
-        isDialogOpen: false,
-        inputValue: '',
-        selectValue: '',
-        dialogStyle: {
-            top: '50px',
-            left: '100px',
-            position: 'absolute'
-        }
-    }}>
-        {({ state, setState }) => (
-            <React.Fragment>
-                <div><pre>{JSON.stringify(state, null, 2) }</pre></div>
-
-                {/* Toggle Dialog */}
-                <button onClick={() => setState({ isDialogOpen: !state.isDialogOpen})}>
-                    {state.isDialogOpen ? 'Close Dialog' : 'Open Dialog'}
-                </button>
-
-                <SimpleDialog
-                    isOpen={state.isDialogOpen}
-                    headerTitle='Example Dialog Header'
-                    onClose={() => setState({ isDialogOpen: false })}
-                    onConfirm={() => setState({
-                        isDialogOpen: false,
-                        // If you don't want to update external state until complete,
-                        // This is where you could grab current field values and update parent
-                        // With setState
-                        //
-                        // inputValue: this.input.value,
-                        // selectValue: this.select.value
-                    })}
-                    componentStyle={state.dialogStyle}
-                    onValueChanged={(value) => setState({value}) }
-                >
-                    <label htmlFor='input' className='simpleDialogLabelFor'>Input Example</label>
-                    <input
-                        id='input'
-                        type='text'
-                        className='simpleDialogInput'
-                        autoComplete='off'
-                        onChange={(e) => setState({inputValue: e.target.value})}
-                    />
-                    <label htmlFor='select' className='simpleDialogLabelFor'>SelectExample</label>
-                    <select
-                        name='select'
-                        id='select'
-                        className='simpleDialogSelect'
-                        onChange={(e) => setState({selectValue: e.target.value})}
-                    >
-                        <option value='Option1'>Option1</option>
-                        <option value='Option2'>Option2</option>
-                        <option value='Option3'>Option3</option>
-                        <option value='Option4'>Option4</option>
-                    </select>
-                </SimpleDialog>
-            </React.Fragment>
-        )}
-    </State>
-
-</Playground>
-
-## API
-
-<Props of={SimpleDialog} />

platform/ui/src/components/studyBrowser/Thumbnail.js

@@ -177,7 +177,9 @@ function Thumbnail(props) {
       const { progressId, progressData } = detail;
       if (`StackProgress:${displaySetInstanceUID}` === progressId) {
         const percent = progressData ? progressData.percentComplete : 0;
-        setStackPercentComplete(percent);
+        if (percent > stackPercentComplete) {
+          setStackPercentComplete(percent);
+        }
       }
     }, 100);
 

platform/ui/src/components/studyBrowser/Thumbnail.styl

@@ -25,7 +25,8 @@
     box-shadow: inset 0 0 0 1px var(--ui-border-color-dark);
     border: 2px solid transparent;
     border-radius: 12px;
-    height: 135px;
+    min-height: 135px;
+    max-height: 250px;
     margin: 0 auto;
     padding: 5px;
     position: relative;
@@ -36,6 +37,11 @@
     h1
       text-align: center
       color: var(--text-primary-color);
+      max-width: 200px;
+      max-height: 250px;
+      overflow-wrap: break-word;
+      word-wrap: break-word;
+      hyphens: auto;
 
   .series-details
     display: flex;

platform/ui/src/components/studyBrowser/__docs__/ExampleDropTarget.css

@@ -1,30 +0,0 @@
-.ExampleDropTarget {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-
-  min-height: 100px;
-
-  border: 2px dashed black;
-  padding: 20px;
-  transition: 0.2s all ease;
-}
-
-.ExampleDropTarget h4,
-.ExampleDropTarger p {
-  text-align: center;
-  word-break: break-word;
-}
-
-.ExampleDropTarget.can-drop {
-  border: 2px dashed #20a5d6;
-  background-color: #fafafa;
-  color: black;
-}
-
-.ExampleDropTarget.hovered {
-  border: 2px dashed #20a5d6;
-  background-color: black;
-  color: #91b9cd;
-  cursor: copy;
-}

platform/ui/src/components/studyBrowser/__docs__/ExampleDropTarget.js

@@ -1,84 +0,0 @@
-import React, { Component } from 'react';
-import { DropTarget } from 'react-dnd';
-import PropTypes from 'prop-types';
-import './ExampleDropTarget.css';
-
-// Drag sources and drop targets only interact
-// if they have the same string type.
-const Types = {
-  THUMBNAIL: 'thumbnail',
-};
-
-const divTarget = {
-  drop(props, monitor, component) {
-    // Note: For this example we use setState, but in
-    // OHIF we will update the redux store instead
-    const item = monitor.getItem();
-
-    component.setState({
-      item: {
-        id: item.id,
-        SeriesDescription: item.SeriesDescription,
-      },
-    });
-    return { id: 'ExampleDropTarget' };
-  },
-};
-
-// TODO: Find out why we can't move this into the Example app instead.
-// It looks like the context isn't properly shared.
-class CustomDropTarget extends Component {
-  static className = 'ExampleDropTarget';
-
-  state = {
-    item: null,
-  };
-
-  static defaultProps = {
-    isOver: false,
-  };
-
-  static propTypes = {
-    connectDropTarget: PropTypes.func.isRequired,
-    canDrop: PropTypes.bool.isRequired,
-    isOver: PropTypes.bool.isRequired,
-  };
-
-  render() {
-    const { canDrop, isOver, connectDropTarget } = this.props;
-    const isActive = canDrop && isOver;
-
-    let className = ExampleDropTarget.className;
-
-    if (isActive) {
-      className += ' hovered';
-    } else if (canDrop) {
-      className += ' can-drop';
-    }
-
-    return connectDropTarget(
-      <div className={className}>
-        <h4>
-          {isActive
-            ? 'Release to drop'
-            : 'Drag / Drop something from the Study Browser here'}
-        </h4>
-        <p className="study-drop-results">
-          {this.state.item && JSON.stringify(this.state.item)}
-        </p>
-      </div>
-    );
-  }
-}
-
-const collect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop(),
-});
-
-const ExampleDropTarget = DropTarget(Types.THUMBNAIL, divTarget, collect)(
-  CustomDropTarget
-);
-
-export { ExampleDropTarget };

platform/ui/src/components/studyBrowser/__docs__/exampleStudies.js

@@ -1,75 +0,0 @@
-export const studies = [
-  {
-    thumbnails: [
-      {
-        imageSrc:
-          'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_Lung.jpg',
-        SeriesDescription: 'Anti-PD-1_Lung',
-        active: true,
-        SeriesNumber: '2',
-        numImageFrames: 512,
-        stackPercentComplete: 30,
-      },
-      {
-        imageSrc:
-          'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_MELANOMA.jpg',
-        SeriesDescription: 'Anti-PD-1_MELANOMA',
-        SeriesNumber: '2',
-        InstanceNumber: '1',
-        numImageFrames: 256,
-        stackPercentComplete: 70,
-      },
-      {
-        altImageText: 'SR',
-        SeriesDescription: 'Imaging Measurement Report',
-        SeriesNumber: '3',
-        stackPercentComplete: 100,
-      },
-    ],
-  },
-  {
-    thumbnails: [
-      {
-        imageSrc:
-          'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-GBM.jpg',
-        SeriesDescription: 'CPTAC-GBM',
-        active: true,
-        SeriesNumber: '2',
-        numImageFrames: 512,
-        stackPercentComplete: 100,
-      },
-      {
-        imageSrc:
-          'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-CM.jpg',
-        SeriesDescription: 'CPTAC-CM',
-        SeriesNumber: '2',
-        InstanceNumber: '1',
-        numImageFrames: 256,
-      },
-      {
-        imageSrc:
-          'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-HNSCC.jpg',
-        SeriesDescription: 'CPTAC-HNSCC',
-        SeriesNumber: '2',
-        InstanceNumber: '1',
-        numImageFrames: 256,
-      },
-      {
-        imageSrc:
-          'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-LSCC.jpg',
-        SeriesDescription: 'CPTAC-LSCC',
-        SeriesNumber: '2',
-        InstanceNumber: '1',
-        numImageFrames: 256,
-      },
-    ],
-  },
-];
-
-export function onThumbnailClick() {
-  console.warn('onThumbnailClick');
-}
-
-export function onThumbnailDoubleClick() {
-  console.warn('onThumbnailDoubleClick');
-}

platform/ui/src/components/studyBrowser/__docs__/studyBrowser.mdx

@@ -1,22 +0,0 @@
----
-name: Study Browser
-menu: Components
-route: /components/study-browser
----
-
-import { Playground, Props } from 'docz'
-import { State } from 'react-powerplug'
-import { WrappedStudyBrowser } from './wrappedStudyBrowser.js'
-import { StudyBrowser } from './../index.js'
-
-# Study Browser
-
-## Basic usage
-
-<Playground>
-  <WrappedStudyBrowser />
-</Playground>
-
-## API
-
-<Props of={StudyBrowser} />

platform/ui/src/components/studyBrowser/__docs__/wrappedStudyBrowser.js

@@ -1,41 +0,0 @@
-import React, { Component } from 'react';
-import { DragDropContext } from 'react-dnd';
-import TouchBackend from 'react-dnd-touch-backend';
-
-//
-import {
-  studies,
-  onThumbnailClick,
-  onThumbnailDoubleClick,
-} from './exampleStudies.js';
-import ExampleDropTarget from './ExampleDropTarget.js';
-import { StudyBrowser } from './../index.js';
-
-class StudyBrowserContainer extends Component {
-  render() {
-    //const viewportData = [null, null, null, null];
-
-    return (
-      <React.Fragment>
-        <ExampleDropTarget />
-        <StudyBrowser
-          studies={studies}
-          onThumbnailClick={onThumbnailClick}
-          onThumbnailDoubleClick={onThumbnailDoubleClick}
-        />
-      </React.Fragment>
-    );
-  }
-}
-
-// Note:
-// Normally, the top level APP component is wrapped with the DragDropContext
-// We wrap this component to create a simple/local example.
-const WrappedStudyBrowser = DragDropContext(
-  TouchBackend({ enableMouseEvents: true }),
-  null,
-  true
-)(StudyBrowserContainer);
-
-// http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context
-export { WrappedStudyBrowser };

platform/ui/src/components/studyList/__docs__/onSearch.js

@@ -1,72 +0,0 @@
-import moment from 'moment';
-
-export default function(searchData) {
-  this.setState({ searchData });
-
-  const filter = (key, searchData, study) => {
-    if (key === 'studyDateFrom' && searchData[key] && study['StudyDate']) {
-      const StudyDate = moment(study['StudyDate'], 'YYYYMMDD');
-      return StudyDate.isBetween(
-        searchData['studyDateFrom'],
-        searchData['studyDateTo'],
-        'days',
-        '[]'
-      );
-    } else if (searchData[key] && !study[key].includes(searchData[key])) {
-      return false;
-    } else {
-      return true;
-    }
-  };
-
-  const { field, order } = searchData.sortData;
-
-  // just a example of local filtering
-  let filteredStudies = this.defaultStudies
-    .filter(function(study) {
-      const all = [
-        'PatientName',
-        'PatientID',
-        'AccessionNumber',
-        'modalities',
-        'StudyDescription',
-        'studyDateFrom',
-      ].every(key => {
-        return filter(key, searchData, study);
-      });
-
-      return all;
-    })
-    .sort(function(a, b) {
-      if (order === 'desc') {
-        if (a[field] < b[field]) {
-          return -1;
-        }
-        if (a[field] > b[field]) {
-          return 1;
-        }
-        return 0;
-      } else {
-        if (a[field] > b[field]) {
-          return -1;
-        }
-        if (a[field] < b[field]) {
-          return 1;
-        }
-        return 0;
-      }
-    });
-
-  // User can notice the loading icon
-  return new Promise(resolve => {
-    setTimeout(() => {
-      const first = searchData.currentPage * searchData.rowsPerPage;
-      let last =
-        searchData.currentPage * searchData.rowsPerPage +
-        searchData.rowsPerPage;
-      last = last >= filteredStudies.length ? filteredStudies.length : last;
-      this.setState({ studies: filteredStudies.slice(first, last) });
-      resolve();
-    }, 500);
-  });
-}

platform/ui/src/components/studyList/__docs__/studies.js

@@ -1,87 +0,0 @@
-import moment from 'moment';
-
-const studies = [
-  {
-    StudyInstanceUID: '11111.111111.111111.11111',
-    PatientName: 'John Doe',
-    PatientID: '1',
-    AccessionNumber: '1234567',
-    StudyDate: '19930201',
-    modalities: 'MR',
-    StudyDescription: 'BRAIN',
-  },
-  {
-    StudyInstanceUID: '2222.222222.22222.22222',
-    PatientName: 'José Silva',
-    PatientID: '2',
-    AccessionNumber: '7654321',
-    StudyDate: moment().format('YYYYMMDD'),
-    modalities: 'CT',
-    StudyDescription: 'PET CT STANDARD',
-  },
-  {
-    StudyInstanceUID: '3333.333333.33333.33333',
-    PatientName: 'Antônio Jefferson',
-    PatientID: '3',
-    AccessionNumber: '732311',
-    StudyDate: moment()
-      .subtract(14, 'days')
-      .format('YYYYMMDD'),
-    modalities: 'US',
-    StudyDescription: '0',
-  },
-  {
-    StudyInstanceUID: '444444.44444.44444.4444',
-    PatientName: 'Antonio da Silva',
-    PatientID: '4',
-    AccessionNumber: '732311',
-    StudyDate: moment()
-      .subtract(1, 'months')
-      .format('YYYYMMDD'),
-    modalities: 'US',
-    StudyDescription: '0',
-  },
-  {
-    StudyInstanceUID: '55555.55555.55555.55555',
-    PatientName: 'Bezerra Souza',
-    PatientID: '5',
-    AccessionNumber: '5134543',
-    StudyDate: moment()
-      .subtract(6, 'days')
-      .format('YYYYMMDD'),
-    modalities: 'US',
-    StudyDescription: '0',
-  },
-  {
-    StudyInstanceUID: '66666.66666.66666.6666',
-    PatientName: 'Geraldo Roger',
-    PatientID: '6',
-    AccessionNumber: '5315135',
-    StudyDate: moment()
-      .subtract(7, 'days')
-      .format('YYYYMMDD'),
-    modalities: 'US',
-    StudyDescription: 'US',
-  },
-  {
-    StudyInstanceUID: '77777.77777.77777.77777',
-    PatientName: '',
-    PatientID: '7',
-    AccessionNumber: '5315136',
-    StudyDate: moment()
-      .subtract(5, 'days')
-      .format('YYYYMMDD'),
-    modalities: 'US',
-    StudyDescription: 'US',
-  },
-].sort(function(a, b) {
-  if (a.PatientName < b.PatientName) {
-    return -1;
-  }
-  if (a.PatientName > b.PatientName) {
-    return 1;
-  }
-  return 0;
-});
-
-export default studies;

platform/ui/src/components/studyList/__docs__/studyList.mdx

@@ -1,53 +0,0 @@
----
-name: Study List
-menu: Components
-route: /components/study-list
----
-
-import { Playground, Props } from 'docz'
-import { State } from 'react-powerplug'
-import { StudyList } from './../index.js'
-// Data
-import defaultStudies from './studies.js'
-import onSearch from './onSearch.js'
-import moment from 'moment'
-
-# Study List
-
-## Basic usage
-
-<Playground>
-    <State initial={{
-        searchData: {},
-        studies: defaultStudies.filter(study => {
-            const StudyDate = moment(study['StudyDate'], 'YYYYMMDD');
-            const startDate = moment().subtract(5, 'days');
-            const endDate = moment();
-
-            return StudyDate.isBetween(startDate, endDate, 'days', '[]');
-        }).slice(0, 5)
-    }}>
-        {({ state, setState }) => (
-        <div className="row" style={{ backgroundColor: '#000', height: '600px' }}>
-            <div className="col-xs-12" style={{ padding: 0 }}>
-                <StudyList
-                    studies={state.studies}
-                    pageOptions={[1, 2, 3, 5, 10, 15, 20, 25, 50, 100]}
-                    studyListFunctionsEnabled={true}
-                    onImport={(e) => alert('Import study mock ' + e)}
-                    onSelectItem={(StudyInstanceUID) => { alert(StudyInstanceUID + ' has selected! Now you can open your study.'); }}
-                    rowsPerPage={5}
-                    defaultSort={{ field: 'PatientName', order: 'desc', }}
-                    studyListDateFilterNumDays={7}
-                    onSearch={onSearch.bind({ setState, defaultStudies })}
-                />
-            </div>
-        </div>
-        )}
-    </State>
-
-</Playground>
-
-## API
-
-<Props of={StudyList} />