OHIF-208 (#1842)

* Set measurement as active

* Add basic dialog component

* Update styles and prop types

* Jump to image

* Update dialog

* Format date

* Update summary to use primary modalities

* delete empty studySummary page

* add missing PropTypes import

* fix for accidental sync'd viewports

* CR Updates

* CR Update avoid cache of measurements

* Use get measurement

* Add comment to edit function

* Remove request and merge modalities from series

* Update dependency: react-cornerstone-viewport@2.3.9

react-cornerstone-viewport
  * @ohif/extension-cornerstone: 2.3.8 → 2.3.9
  * @ohif/extension-dicom-sr: 2.3.8 → 2.3.9

* Update extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

* Add debugs

* remove console.debug

* Update frameindex to imageindex

* Use new rcv debounced function

* Fix hovering

* Update dialog text

* Dismiss dialogs on esc

* Update dependency: react-cornerstone-viewport@3.0.0

react-cornerstone-viewport
  * @ohif/extension-cornerstone: 2.3.9 → 3.0.0
  * @ohif/extension-dicom-sr: 2.3.9 → 3.0.0

* OHIF-237

* remove console.debug

* Remove dead code brought in from rebase

* EmptyViewport should not display a message

* Remove more dead code from rebase

* fix variable naming

* remove unused hook

* bump yarn lock

* formatting

* Add arrow dialog

* Filter based on trackedSeries

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

extensions/cornerstone/package.json

@@ -50,6 +50,6 @@
     "classnames": "^2.2.6",
     "lodash.merge": "^4.6.2",
     "lodash.throttle": "^4.1.1",
-    "react-cornerstone-viewport": "2.3.8"
+    "react-cornerstone-viewport": "3.0.0"
   }
 }

extensions/cornerstone/src/OHIFCornerstoneViewport.js

@@ -3,7 +3,6 @@ import CornerstoneViewport from 'react-cornerstone-viewport';
 //import ConnectedCornerstoneViewport from './ConnectedCornerstoneViewport';
 import OHIF from '@ohif/core';
 import PropTypes from 'prop-types';
-import cornerstone from 'cornerstone-core';
 import debounce from 'lodash.debounce';
 import throttle from 'lodash.throttle';
 
@@ -68,7 +67,7 @@ class OHIFCornerstoneViewport extends Component {
    * @return {Object} CornerstoneTools Stack
    */
   static getCornerstoneStack(displaySet, dataSource) {
-    const { frameIndex } = displaySet;
+    const { imageIndex } = displaySet;
 
     // Get stack from Stack Manager
     const storedStack = StackManager.findOrCreateStack(displaySet, dataSource);
@@ -76,7 +75,7 @@ class OHIFCornerstoneViewport extends Component {
     // Clone the stack here so we don't mutate it
     const stack = Object.assign({}, storedStack);
 
-    stack.currentImageIdIndex = frameIndex;
+    stack.currentImageIdIndex = imageIndex;
 
     // TODO -> Do we ever use this like this?
     // if (SOPInstanceUID) {
@@ -157,7 +156,7 @@ class OHIFCornerstoneViewport extends Component {
       displaySet.displaySetInstanceUID !==
       prevDisplaySet.displaySetInstanceUID ||
       displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
-      displaySet.frameIndex !== prevDisplaySet.frameIndex
+      displaySet.imageIndex !== prevDisplaySet.imageIndex
     ) {
       this.setStateFromProps();
     }
@@ -199,7 +198,7 @@ class OHIFCornerstoneViewport extends Component {
           this.props.onNewImage({
             StudyInstanceUID,
             SOPInstanceUID: sopInstanceUid,
-            frameIndex: currentImageIdIndex,
+            imageIndex: currentImageIdIndex,
             activeViewportIndex: viewportIndex,
           });
         }

extensions/cornerstone/src/commandsModule.js

@@ -271,7 +271,7 @@ const commandsModule = ({ servicesManager }) => {
     jumpToImage: ({
       StudyInstanceUID,
       SOPInstanceUID,
-      frameIndex,
+      imageIndex,
       activeViewportIndex,
     }) => {
       const study = studyMetadataManager.get(StudyInstanceUID);
@@ -284,7 +284,7 @@ const commandsModule = ({ servicesManager }) => {
       });
 
       displaySet.SOPInstanceUID = SOPInstanceUID;
-      displaySet.frameIndex = frameIndex;
+      displaySet.imageIndex = imageIndex;
 
       window.store.dispatch(
         setViewportSpecificData(activeViewportIndex, displaySet)

extensions/cornerstone/src/init.js

@@ -1,5 +1,6 @@
+import React from 'react';
 import OHIF from '@ohif/core';
-import { SimpleDialog } from '@ohif/ui';
+import { Dialog, Input } from '@ohif/ui';
 import cornerstone from 'cornerstone-core';
 import csTools from 'cornerstone-tools';
 import merge from 'lodash.merge';
@@ -23,18 +24,48 @@ export default function init({ servicesManager, configuration }) {
       let dialogId = UIDialogService.create({
         centralize: true,
         isDraggable: false,
-        content: SimpleDialog.InputDialog,
+        content: Dialog,
         useLastPosition: false,
         showOverlay: true,
         contentProps: {
           title: 'Enter your annotation',
-          label: 'New label',
+          value: { label: data ? data.text : '' },
-          measurementData: data ? { description: data.text } : {},
+          noCloseButton: true,
           onClose: () => UIDialogService.dismiss({ id: dialogId }),
-          onSubmit: value => {
+          actions: [
-            callback(value);
+            { id: 'cancel', text: 'Cancel', type: 'secondary' },
+            { id: 'save', text: 'Save', type: 'primary' },
+          ],
+          onSubmit: ({ action, value }) => {
+            switch (action.id) {
+              case 'save': callback(value.label);
+            }
             UIDialogService.dismiss({ id: dialogId });
           },
+          body: ({ value, setValue }) => {
+            const onChangeHandler = (event) => {
+              event.persist();
+              setValue(value => ({ ...value, label: event.target.value }));
+            };
+            const onKeyPressHandler = event => {
+              if (event.key === 'Enter') {
+                onSubmitHandler({ value, action: { id: 'save' } });
+              }
+            };
+            return (
+              <div className="p-4 bg-primary-dark">
+                <Input
+                  autoFocus
+                  className="mt-2 bg-black border-primary-main"
+                  type="text"
+                  containerClassName="mr-2"
+                  value={value.label}
+                  onChange={onChangeHandler}
+                  onKeyPress={onKeyPressHandler}
+                />
+              </div>
+            );
+          },
         },
       });
     }
@@ -108,7 +139,6 @@ export default function init({ servicesManager, configuration }) {
 
   /* Add extension tools configuration here. */
   const internalToolsConfig = {
-    /* TODO ArrowAnnotate input
     ArrowAnnotate: {
       configuration: {
         getTextCallback: (callback, eventDetails) =>
@@ -117,7 +147,6 @@ export default function init({ servicesManager, configuration }) {
           callInputDialog(data, eventDetails, callback),
       },
     },
-    */
   };
 
   /* Abstract tools configuration using extension configuration. */

extensions/default/src/PanelMeasurementTable.js

@@ -51,8 +51,8 @@ export default function PanelMeasurementTable({
           title="Measurements"
           amount={displayMeasurements.length}
           data={displayMeasurements}
-          onClick={() => {}}
+          onClick={({ id }) => alert(`Click: ${id}`)}
-          onEdit={id => alert(`Edit: ${id}`)}
+          onEdit={({ id }) => alert(`Edit: ${id}`)}
         />
       </div>
     </>

extensions/dicom-rt/src/components/RTPanel/RTPanel.js

@@ -150,7 +150,7 @@ const RTPanel = ({
             imageIds
           );
 
-          const frameIndex = imageIds.indexOf(imageId);
+          const imageIndex = imageIds.indexOf(imageId);
           const SOPInstanceUID = cornerstone.metaData.get(
             'SOPInstanceUID',
             imageId
@@ -163,7 +163,7 @@ const RTPanel = ({
           onContourItemClick({
             StudyInstanceUID,
             SOPInstanceUID,
-            frameIndex,
+            imageIndex,
             activeViewportIndex: activeIndex,
           });
         }}

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

@@ -320,7 +320,7 @@ const SegmentationPanel = ({
 
             const imageIds = toolState.data[0].imageIds;
             const imageId = imageIds[closest];
-            const frameIndex = imageIds.indexOf(imageId);
+            const imageIndex = imageIds.indexOf(imageId);
 
             const SOPInstanceUID = cornerstone.metaData.get(
               'SOPInstanceUID',
@@ -334,7 +334,7 @@ const SegmentationPanel = ({
             onSegmentItemClick({
               StudyInstanceUID,
               SOPInstanceUID,
-              frameIndex,
+              imageIndex,
               activeViewportIndex: activeIndex,
             });
           }
@@ -360,7 +360,7 @@ const SegmentationPanel = ({
               SOPClassUID: viewports[activeIndex].sopClassUIDs[0],
               SOPInstanceUID: currentDisplaySet.SOPInstanceUID,
               segmentNumber,
-              frameIndex: closest,
+              imageIndex: closest,
               frame,
             });
           }

extensions/dicom-sr/package.json

@@ -50,6 +50,6 @@
     "classnames": "^2.2.6",
     "lodash.merge": "^4.6.2",
     "lodash.throttle": "^4.1.1",
-    "react-cornerstone-viewport": "2.3.8"
+    "react-cornerstone-viewport": "3.0.0"
   }
 }

extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js

@@ -1,12 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { StudySummary, MeasurementTable } from '@ohif/ui';
+import {
-import { DicomMetadataStore, DICOMSR } from '@ohif/core';
+  StudySummary,
+  MeasurementTable,
+  Dialog,
+  Input,
+  useViewportGrid,
+} from '@ohif/ui';
+import { DicomMetadataStore, DICOMSR, utils } from '@ohif/core';
 import { useDebounce } from '@hooks';
 import ActionButtons from './ActionButtons';
 import { useTrackedMeasurements } from '../../getContextModule';
 import createReportAsync from './../../_shared/createReportAsync.js';
 
+const { formatDate } = utils;
+
 const DISPLAY_STUDY_SUMMARY_INITIAL_VALUE = {
   key: undefined, //
   date: undefined, // '07-Sep-2010',
@@ -15,6 +23,7 @@ const DISPLAY_STUDY_SUMMARY_INITIAL_VALUE = {
 };
 
 function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
+  const [viewportGrid, viewportGridService] = useViewportGrid();
   const [measurementChangeTimestamp, setMeasurementsUpdated] = useState(
     Date.now().toString()
   );
@@ -22,11 +31,8 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     measurementChangeTimestamp,
     200
   );
-  const { MeasurementService } = servicesManager.services;
+  const { MeasurementService, UINotificationService, UIDialogService, DisplaySetService } = servicesManager.services;
-  const [
+  const [trackedMeasurements, sendTrackedMeasurementsEvent] = useTrackedMeasurements();
-    trackedMeasurements,
-    sendTrackedMeasurementsEvent,
-  ] = useTrackedMeasurements();
   const { trackedStudy, trackedSeries } = trackedMeasurements.context;
   const [displayStudySummary, setDisplayStudySummary] = useState(
     DISPLAY_STUDY_SUMMARY_INITIAL_VALUE
@@ -53,25 +59,37 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     debouncedMeasurementChangeTimestamp,
   ]);
 
-  // ~~ DisplayStudySummary
+  const updateDisplayStudySummary = async () => {
-  useEffect(() => {
     if (trackedMeasurements.matches('tracking')) {
       const StudyInstanceUID = trackedStudy;
       const studyMeta = DicomMetadataStore.getStudy(StudyInstanceUID);
       const instanceMeta = studyMeta.series[0].instances[0];
-      const { Modality, StudyDate, StudyDescription } = instanceMeta;
+      const { StudyDate, StudyDescription } = instanceMeta;
+
+      const modalities = new Set();
+      studyMeta.series.forEach(series => {
+        if (trackedSeries.includes(series.SeriesInstanceUID)) {
+          modalities.add(series.instances[0].Modality);
+        }
+      });
+      const modality = Array.from(modalities).join('/');
 
       if (displayStudySummary.key !== StudyInstanceUID) {
         setDisplayStudySummary({
           key: StudyInstanceUID,
           date: StudyDate, // TODO: Format: '07-Sep-2010'
-          modality: Modality,
+          modality,
           description: StudyDescription,
         });
       }
     } else if (trackedStudy === '' || trackedStudy === undefined) {
       setDisplayStudySummary(DISPLAY_STUDY_SUMMARY_INITIAL_VALUE);
     }
+  };
+
+  // ~~ DisplayStudySummary
+  useEffect(() => {
+    updateDisplayStudySummary();
   }, [displayStudySummary.key, trackedMeasurements, trackedStudy]);
 
   // TODO: Better way to consolidated, debounce, check on change?
@@ -129,12 +147,106 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     DICOMSR.downloadReport(trackedMeasurements, dataSource);
   }
 
+  const jumpToImage = ({ id, isActive }) => {
+    const measurement = MeasurementService.getMeasurement(id);
+    const { referenceSeriesUID, SOPInstanceUID } = measurement;
+
+    const displaySets = DisplaySetService.getDisplaySetsForSeries(referenceSeriesUID);
+    const displaySet = displaySets.find(ds => {
+      return ds.images && ds.images.some(i => i.SOPInstanceUID === SOPInstanceUID)
+    });
+
+    const imageIndex = displaySet.images.map(i => i.SOPInstanceUID).indexOf(SOPInstanceUID);
+
+    viewportGridService.setDisplaysetForViewport({
+      viewportIndex: viewportGrid.activeViewportIndex,
+      displaySetInstanceUID: displaySet.displaySetInstanceUID,
+      imageIndex
+    });
+
+    onMeasurementItemClickHandler({ id, isActive });
+  };
+
+  const onMeasurementItemEditHandler = ({ id }) => {
+    const measurement = MeasurementService.getMeasurement(id);
+
+    let dialogId;
+    const onSubmitHandler = ({ action, value }) => {
+      switch (action.id) {
+        case 'save': {
+          MeasurementService.update(id, {
+            ...measurement,
+            ...value
+          });
+          UINotificationService.show({
+            title: 'Measurements',
+            message: 'Label updated successfully',
+            type: 'success'
+          });
+        }
+      }
+      UIDialogService.dismiss({ id: dialogId });
+    };
+    dialogId = UIDialogService.create({
+      centralize: true,
+      isDraggable: false,
+      useLastPosition: false,
+      showOverlay: true,
+      content: Dialog,
+      contentProps: {
+        title: 'Enter your annotation',
+        noCloseButton: true,
+        value: { label: measurement.label || '' },
+        body: ({ value, setValue }) => {
+          const onChangeHandler = (event) => {
+            event.persist();
+            setValue(value => ({ ...value, label: event.target.value }));
+          };
+
+          const onKeyPressHandler = event => {
+            if (event.key === 'Enter') {
+              onSubmitHandler({ value, action: { id: 'save' } });
+            }
+          };
+          return (
+            <div className="p-4 bg-primary-dark">
+              <Input
+                autoFocus
+                className="mt-2 bg-black border-primary-main"
+                type="text"
+                containerClassName="mr-2"
+                value={value.label}
+                onChange={onChangeHandler}
+                onKeyPress={onKeyPressHandler}
+              />
+            </div>
+          );
+        },
+        actions: [
+          { id: 'cancel', text: 'Cancel', type: 'secondary' },
+          { id: 'save', text: 'Save', type: 'primary' },
+        ],
+        onSubmit: onSubmitHandler
+      }
+    });
+  };
+
+  const onMeasurementItemClickHandler = ({ id, isActive }) => {
+    if (!isActive) {
+      const measurements = [...displayMeasurements];
+      const measurement = measurements.find(m => m.id === id);
+      measurements.forEach(m => m.isActive = m.id !== id ? false : true);
+      measurement.isActive = true;
+      setDisplayMeasurements(measurements);
+    }
+  };
+
   return (
     <>
       <div className="overflow-x-hidden overflow-y-auto invisible-scrollbar">
         {displayStudySummary.key && (
           <StudySummary
-            date={displayStudySummary.date}
+            date={formatDate(displayStudySummary.date)}
             modality={displayStudySummary.modality}
             description={displayStudySummary.description}
           />
@@ -143,8 +255,8 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
           title="Measurements"
           amount={displayMeasurements.length}
           data={displayMeasurements}
-          onClick={() => { }}
+          onClick={jumpToImage}
-          onEdit={id => alert(`Edit: ${id}`)}
+          onEdit={onMeasurementItemEditHandler}
         />
       </div>
       <div className="flex justify-center p-4">
@@ -187,8 +299,8 @@ function _mapMeasurementToDisplay(measurement, index, types) {
   const { PixelSpacing, SeriesNumber, InstanceNumber } = instance;
 
   return {
-    id: index + 1,
+    id: measurement.id,
-    label: '(empty)', // 'Label short description',
+    label: measurement.label || '(empty)',
     displayText:
       _getDisplayText(
         measurement,

extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js

@@ -33,7 +33,6 @@ const BaseAnnotationTool = cornerstoneTools.importInternal(
 );
 
 // const cine = viewportSpecificData.cine;
-
 // isPlaying = cine.isPlaying === true;
 // frameRate = cine.cineFrameRate || frameRate;
 
@@ -47,7 +46,10 @@ function TrackedCornerstoneViewport({
   ToolBarService,
 }) {
   const [trackedMeasurements] = useTrackedMeasurements();
-  const [{ activeViewportIndex, viewports }] = useViewportGrid();
+  const [
+    { activeViewportIndex, viewports },
+    viewportGridService,
+  ] = useViewportGrid();
   // viewportIndex, onSubmit
   const [viewportDialogState, viewportDialogApi] = useViewportDialog();
   const [viewportData, setViewportData] = useState(null);
@@ -159,16 +161,15 @@ function TrackedCornerstoneViewport({
       );
     }
 
-    _getViewportData(dataSource, displaySet).then(viewportData => {
+    /*
-      setViewportData({ ...viewportData });
+     * This grabs `imageIndex from first matching
-    });
+     * We actually want whichever is at our `viewportIndex`
-  }, [
+     */
-    dataSource,
+    const { imageIndex } = viewports[viewportIndex];
-    displaySet,
+    displaySet.imageIndex = imageIndex;
-    displaySet.StudyInstanceUID,
+
-    displaySet.displaySetInstanceUID,
+    _getViewportData(dataSource, displaySet).then(setViewportData);
-    displaySet.frameIndex,
+  }, [dataSource, displaySet, viewports, viewportIndex]);
-  ]);
 
   // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   let childrenWithProps = null;
@@ -282,6 +283,14 @@ function TrackedCornerstoneViewport({
           viewportIndex={viewportIndex}
           imageIds={imageIds}
           imageIdIndex={currentImageIdIndex}
+          onNewImageDebounceTime={700}
+          onNewImageDebounced={({ currentImageIdIndex }) => {
+            viewportGridService.setDisplaysetForViewport({
+              viewportIndex: activeViewportIndex,
+              displaySetInstanceUID: displaySet.displaySetInstanceUID,
+              imageIndex: currentImageIdIndex,
+            });
+          }}
           // TODO: ViewportGrid Context?
           isActive={true} // todo
           isStackPrefetchEnabled={true} // todo
@@ -336,7 +345,7 @@ const _viewportLabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
  * @return {Object} CornerstoneTools Stack
  */
 function _getCornerstoneStack(displaySet, dataSource) {
-  const { frameIndex } = displaySet;
+  const { imageIndex } = displaySet;
 
   // Get stack from Stack Manager
   const storedStack = StackManager.findOrCreateStack(displaySet, dataSource);
@@ -344,17 +353,22 @@ function _getCornerstoneStack(displaySet, dataSource) {
   // Clone the stack here so we don't mutate it
   const stack = Object.assign({}, storedStack);
 
-  stack.currentImageIdIndex = frameIndex;
+  stack.currentImageIdIndex = imageIndex;
 
   return stack;
 }
 
+/**
+ * Builds the viewport data from a datasource and a displayset.
+ *
+ * @param {Object} dataSource
+ * @param {Object} displaySet
+ * @return {Object} viewport data
+ */
 async function _getViewportData(dataSource, displaySet) {
-  let viewportData;
-
   const stack = _getCornerstoneStack(displaySet, dataSource);
 
-  viewportData = {
+  const viewportData = {
     StudyInstanceUID: displaySet.StudyInstanceUID,
     displaySetInstanceUID: displaySet.displaySetInstanceUID,
     stack,

extensions/measurement-tracking/src/viewports/ViewportOverlay.js

@@ -40,9 +40,9 @@ const ViewportOverlay = ({
         {isWwwcActive && (
           <div className="flex flex-row">
             <span className="mr-1">W:</span>
-            <span className="font-thin ml-1 mr-2">{windowWidth.toFixed(0)}</span>
+            <span className="ml-1 mr-2 font-thin">{windowWidth.toFixed(0)}</span>
             <span className="mr-1">L:</span>
-            <span className="font-thin ml-1">{windowCenter.toFixed(0)}</span>
+            <span className="ml-1 font-thin">{windowCenter.toFixed(0)}</span>
           </div>
         )}
       </div>
@@ -51,15 +51,13 @@ const ViewportOverlay = ({
           <div className="flex flex-row">
             <span className="mr-1">I:</span>
             <span className="font-thin">
-              {`${instanceNumber}/${stackSize}`}
+              {`${instanceNumber} ${imageIndex}/${stackSize}`}
             </span>
           </div>
         )}
       </div>
-      <div className={classnames(overlay, bottomRight)}>
+      <div className={classnames(overlay, bottomRight)}></div>
-      </div>
+      <div className={classnames(overlay, bottomLeft)}></div>
-      <div className={classnames(overlay, bottomLeft)}>
-      </div>
     </div>
   );
 };

extensions/vtk/src/OHIFVTKViewport.js

@@ -60,7 +60,7 @@ class OHIFVTKViewport extends Component {
         displaySetInstanceUID: PropTypes.string,
         sopClassUIDs: PropTypes.arrayOf(PropTypes.string),
         SOPInstanceUID: PropTypes.string,
-        frameIndex: PropTypes.number,
+        imageIndex: PropTypes.number,
       }),
     }),
     viewportIndex: PropTypes.number,
@@ -88,7 +88,7 @@ class OHIFVTKViewport extends Component {
     StudyInstanceUID,
     displaySetInstanceUID,
     SOPInstanceUID,
-    frameIndex
+    imageIndex
   ) {
     // Create shortcut to displaySet
     const study = studies.find(
@@ -105,8 +105,8 @@ class OHIFVTKViewport extends Component {
     // Clone the stack here so we don't mutate it
     const stack = Object.assign({}, storedStack);
 
-    if (frameIndex !== undefined) {
+    if (imageIndex !== undefined) {
-      stack.currentImageIdIndex = frameIndex;
+      stack.currentImageIdIndex = imageIndex;
     } else if (SOPInstanceUID) {
       const index = stack.imageIds.findIndex(imageId => {
         const imageIdSOPInstanceUID = cornerstone.metaData.get(
@@ -133,7 +133,7 @@ class OHIFVTKViewport extends Component {
     displaySetInstanceUID,
     SOPClassUID,
     SOPInstanceUID,
-    frameIndex
+    imageIndex
   ) => {
     const stack = OHIFVTKViewport.getCornerstoneStack(
       studies,
@@ -141,7 +141,7 @@ class OHIFVTKViewport extends Component {
       displaySetInstanceUID,
       SOPClassUID,
       SOPInstanceUID,
-      frameIndex
+      imageIndex
     );
 
     const imageDataObject = getImageData(stack.imageIds, displaySetInstanceUID);
@@ -270,7 +270,7 @@ class OHIFVTKViewport extends Component {
       displaySetInstanceUID,
       sopClassUIDs,
       SOPInstanceUID,
-      frameIndex,
+      imageIndex,
     } = displaySet;
 
     if (sopClassUIDs.length > 1) {
@@ -302,7 +302,7 @@ class OHIFVTKViewport extends Component {
       StudyInstanceUID,
       displaySetInstanceUID,
       SOPInstanceUID,
-      frameIndex
+      imageIndex
     );
 
     this.imageDataObject = imageDataObject;
@@ -353,7 +353,7 @@ class OHIFVTKViewport extends Component {
       displaySet.displaySetInstanceUID !==
       prevDisplaySet.displaySetInstanceUID ||
       displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
-      displaySet.frameIndex !== prevDisplaySet.frameIndex
+      displaySet.imageIndex !== prevDisplaySet.imageIndex
     ) {
       this.setStateFromProps();
     }

platform/core/src/DICOMSR/parseDicomStructuredReport.js

@@ -39,7 +39,9 @@ const parseDicomStructuredReport = (part10SRArrayBuffer, displaySets) => {
       const { _study: study, _series: series } = instanceMetadata;
       const { StudyInstanceUID, PatientID } = study;
       const { SeriesInstanceUID } = series;
+      /* TODO: Update frameIndex to imageIndex for measurements */
       const { sopInstanceUid, frameIndex } = measurement;
+
       const imagePath = getImagePath(
         StudyInstanceUID,
         SeriesInstanceUID,

platform/core/src/services/MeasurementService/MeasurementService.js

@@ -282,6 +282,27 @@ class MeasurementService {
     }
   }
 
+  update(id, measurement) {
+    if (this.measurements[id]) {
+      const updatedMeasurement = {
+        ...measurement,
+        modifiedTimestamp: Math.floor(Date.now() / 1000)
+      };
+
+      log.info(`Updating measurement...`, updatedMeasurement);
+
+      this.measurements[id] = updatedMeasurement;
+
+      this._broadcastChange(
+        this.EVENTS.MEASUREMENT_UPDATED,
+        measurement.source,
+        updatedMeasurement
+      );
+
+      return updatedMeasurement.id;
+    }
+  }
+
   /**
    * Add a raw measurement into a source so that it may be
    * Converted to/from annotation in the same way. E.g. import serialized data

platform/ui/src/components/Dialog/Body.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { Typography } from '..';
+
+const Body = ({ text, className }) => {
+  const theme = 'bg-primary-dark';
+  return (
+    <div className={classNames('relative flex-auto', theme, className)}>
+      <div className="p-6">
+        <Typography variant="body" className="my-4 leading-relaxed">
+          {text}
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+Body.propTypes = {
+  text: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export default Body;

platform/ui/src/components/Dialog/Dialog.jsx

@@ -1,12 +1,83 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-const Dialog = ({ children }) => {
+import Footer from './Footer';
-  return <div className="absolute top-0 left-0">{children}</div>;
+import Body from './Body';
+import Header from './Header';
+
+const Dialog = ({
+  title,
+  text,
+  onClose,
+  noCloseButton,
+  actions,
+  onSubmit,
+  header: HeaderComponent,
+  body: BodyComponent,
+  footer: FooterComponent,
+  value: defaultValue
+}) => {
+  const [value, setValue] = useState(defaultValue);
+
+  const theme = 'bg-secondary-light';
+  const flex = 'flex flex-col';
+  const border = 'border-0 rounded-lg shadow-lg';
+  const outline = 'outline-none focus:outline-none';
+  const position = 'relative';
+  const width = 'w-full';
+
+  return (
+    <div
+      className={classNames(theme, flex, border, outline, position, width)}
+    >
+      <HeaderComponent
+        title={title}
+        noCloseButton={noCloseButton}
+        onClose={onClose}
+        value={value}
+        setValue={setValue}
+      />
+      <BodyComponent
+        text={text}
+        value={value}
+        setValue={setValue}
+      />
+      <FooterComponent
+        actions={actions}
+        onSubmit={onSubmit}
+        value={value}
+        setValue={setValue}
+      />
+    </div>
+  );
 };
 
 Dialog.propTypes = {
-  children: PropTypes.node,
+  title: PropTypes.string,
+  text: PropTypes.string,
+  onClose: PropTypes.func,
+  noCloseButton: PropTypes.bool,
+  header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  onSubmit: PropTypes.func.isRequired,
+  value: PropTypes.object,
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+      value: PropTypes.any,
+      type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
+    })
+  ).isRequired,
+};
+
+Dialog.defaultProps = {
+  header: Header,
+  footer: Footer,
+  body: Body,
+  value: {}
 };
 
 export default Dialog;

platform/ui/src/components/Dialog/Footer.js

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { Button } from '..';
+
+const Footer = ({ actions, className, onSubmit, value }) => {
+  const flex = 'flex items-center justify-end';
+  const border = 'border-t-2 border-solid border-black rounded-b';
+  const spacing = 'p-6';
+  const theme = 'bg-primary-dark';
+
+  return (
+    <div className={classNames(flex, border, spacing, theme, className)}>
+      {actions.map((action, index) => {
+        const isFirst = index === 0;
+        const isPrimary = action.type === 'primary';
+
+        const onClickHandler = event => onSubmit({ action, value, event });
+
+        return (
+          <Button
+            key={index}
+            className={classNames({ 'ml-2': !isFirst })}
+            color={isPrimary ? 'primary' : undefined}
+            onClick={onClickHandler}
+            style={{ transition: 'all .15s ease', height: 34 }}
+          >
+            {action.text}
+          </Button>
+        );
+      })}
+    </div>
+  );
+};
+
+const noop = () => { };
+
+Footer.propTypes = {
+  className: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+      value: PropTypes.any,
+      type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
+    })
+  ).isRequired,
+};
+
+Footer.defaultProps = {
+  onSubmit: noop,
+  actions: []
+};
+
+export default Footer;

platform/ui/src/components/Dialog/Header.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { Typography, Icon } from '..';
+
+const CloseButton = ({ onClick }) => {
+  const theme = 'bg-transparent fill-primary-active';
+  const outline = 'outline-none focus:outline-none';
+  const flex = 'flex h-full';
+
+  return (
+    <button className={classNames(flex, theme, 'border-0')} onClick={onClick}>
+      <Icon name="close" className={classNames(theme, outline, 'h-3 w-3')} />
+    </button>
+  );
+};
+
+CloseButton.propTypes = {
+  onClick: PropTypes.func,
+};
+
+const Header = ({ title, noCloseButton, onClose }) => {
+  const theme = 'bg-secondary-main';
+  const flex = 'flex items-center justify-between';
+  const border = 'border-b-2 border-solid border-black rounded-t';
+  const spacing = 'p-4';
+
+  return (
+    <div className={classNames(theme, flex, border, spacing)}>
+      <Typography variant="h6" className="text-primary-active">
+        {title}
+      </Typography>
+      {!noCloseButton && <CloseButton onClick={onClose} />}
+    </div>
+  );
+};
+
+Header.propTypes = {
+  className: PropTypes.string,
+  title: PropTypes.string,
+  noCloseButton: PropTypes.bool,
+  onClose: PropTypes.func,
+};
+
+Header.defaultProps = {
+  noCloseButton: false
+};
+
+export default Header;

platform/ui/src/components/Input/Input.jsx

@@ -21,6 +21,8 @@ const Input = ({
   value,
   onChange,
   onFocus,
+  autoFocus,
+  onKeyPress,
   ...otherProps
 }) => {
   return (
@@ -32,10 +34,12 @@ const Input = ({
           baseInputClasses,
           transparentClasses[transparent]
         )}
+        autoFocus
         type={type}
         value={value}
         onChange={onChange}
         onFocus={onFocus}
+        onKeyPress={onKeyPress}
         {...otherProps}
       />
     </div>
@@ -52,6 +56,8 @@ Input.propTypes = {
   value: PropTypes.any,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
+  autoFocus: PropTypes.bool,
+  onKeyPress: PropTypes.func,
 };
 
 export default Input;

platform/ui/src/components/MeasurementTable/MeasurementItem.js

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Icon } from '@ohif/ui';
+
+const MeasurementItem = ({ id, index, label, displayText, isActive, onClick, onEdit }) => {
+  const [isHovering, setIsHovering] = useState(false);
+
+  const onEditHandler = event => {
+    event.stopPropagation();
+    onEdit({ id, isActive, event });
+  };
+
+  const onClickHandler = event => onClick({ id, isActive, event });
+
+  const onMouseEnter = () => setIsHovering(true);
+  const onMouseLeave = () => setIsHovering(false);
+
+  return (
+    <div
+      className={classnames(
+        'group flex cursor-pointer bg-black border outline-none border-transparent transition duration-300',
+        {
+          'rounded overflow-hidden border-primary-light': isActive,
+        }
+      )}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onClick={onClickHandler}
+      onKeyDown={onClickHandler}
+      role="button"
+      tabIndex="0"
+    >
+      <div
+        className={classnames(
+          'text-center w-6 py-1 text-base transition duration-300',
+          {
+            'bg-primary-light text-black': isActive,
+            'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
+          }
+        )}
+      >
+        {index}
+      </div>
+      <div className="px-2 py-1 flex flex-1 flex-col relative">
+        <span className="text-base text-primary-light mb-1">
+          {label}
+        </span>
+        {displayText.map(line => (
+          <span key={line} className="pl-2 border-l border-primary-light text-base text-white">
+            {line}
+          </span>
+        ))}
+        <Icon
+          className={classnames(
+            'text-white w-4 absolute cursor-pointer transition duration-300',
+            { 'invisible opacity-0 mr-2': !isActive && !isHovering },
+            { 'visible opacity-1': !isActive && isHovering }
+          )}
+          name="pencil"
+          style={{
+            top: 4,
+            right: 4,
+            transform: isActive || isHovering ? '' : 'translateX(100%)',
+          }}
+          onClick={onEditHandler}
+        />
+      </div>
+    </div>
+  );
+};
+
+MeasurementItem.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]),
+  index: PropTypes.number.isRequired,
+  label: PropTypes.string,
+  displayText: PropTypes.array.isRequired,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func,
+  onEdit: PropTypes.func
+};
+
+MeasurementItem.defaultProps = {
+  isActive: false,
+};
+
+export default MeasurementItem;

platform/ui/src/components/MeasurementTable/MeasurementTable.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon } from '@ohif/ui';
+
+import MeasurementItem from './MeasurementItem';
 
 const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
   return (
@@ -13,66 +14,18 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
         <span className="text-base font-bold text-white">{amount}</span>
       </div>
       <div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-112">
-        {!!data.length &&
+        {data.length && data.map((measurementItem, index) => (
-          data.map(measurementItem => {
+          <MeasurementItem
-            const { id, label, displayText, isActive } = measurementItem;
+            key={measurementItem.id}
-            return (
+            id={measurementItem.id}
-              <div
+            index={index + 1}
-                key={id}
+            label={measurementItem.label}
-                className={classnames(
+            isActive={measurementItem.isActive}
-                  'group flex cursor-default bg-black border border-transparent transition duration-300 ',
+            displayText={measurementItem.displayText}
-                  {
+            onClick={onClick}
-                    'rounded overflow-hidden border-primary-light': isActive,
+            onEdit={onEdit}
-                  }
-                )}
-                onClick={() => onClick(measurementItem.id)}
-                onKeyDown={() => onClick(measurementItem.id)}
-                role="button"
-                tabIndex="0"
-              >
-                <div
-                  className={classnames(
-                    'text-center w-6 py-1 text-base transition duration-300',
-                    {
-                      'bg-primary-light text-black': isActive,
-                      'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
-                    }
-                  )}
-                >
-                  {id}
-                </div>
-                <div className="px-2 py-1 flex flex-1 flex-col relative">
-                  <span className="text-base text-primary-light mb-1">
-                    {label}
-                  </span>
-                  {displayText.map(line => (
-                    <span className="pl-2 border-l border-primary-light text-base text-white">
-                      {line}
-                    </span>
-                  ))}
-                  <Icon
-                    className={classnames(
-                      'text-white w-4 absolute cursor-pointer transition duration-300',
-                      {
-                        'invisible opacity-0 mr-2': !isActive,
-                      }
-                    )}
-                    name="pencil"
-                    style={{
-                      top: 4,
-                      right: 4,
-                      transform: isActive ? '' : 'translateX(100%)',
-                    }}
-                    onClick={e => {
-                      // stopPropagation needed to avoid disable the current active item
-                      e.stopPropagation();
-                      onEdit(id);
-                    }}
           />
-                </div>
+        ))}
-              </div>
-            );
-          })}
         {!data.length && (
           <div
             className={classnames(

platform/ui/src/contextProviders/DialogProvider.jsx

@@ -4,6 +4,7 @@ import React, {
   useContext,
   useCallback,
   useEffect,
+  useRef
 } from 'react';
 
 import PropTypes from 'prop-types';
@@ -251,12 +252,18 @@ const DialogProvider = ({ children, service }) => {
     });
   };
 
+  const onKeyDownHandler = event => {
+    if (event.key === "Escape") {
+      dismissAll();
+    }
+  };
+
   const validCallback = callback => callback && typeof callback === 'function';
 
   return (
     <DialogContext.Provider value={{ create, dismiss, dismissAll, isEmpty }}>
       {!isEmpty() &&
-        <div className='w-full h-full absolute'>
+        <div className='w-full h-full absolute' onKeyDown={onKeyDownHandler}>
           {renderDialogs()}
         </div>
       }

platform/ui/src/contextProviders/ViewportGridProvider.jsx

@@ -27,10 +27,10 @@ export function ViewportGridProvider({ children, service }) {
         return { ...state, ...{ activeViewportIndex: action.payload } };
       }
       case 'SET_DISPLAYSET_FOR_VIEWPORT': {
-        const { viewportIndex, displaySetInstanceUID } = action.payload;
+        const { viewportIndex, displaySetInstanceUID, imageIndex } = action.payload;
         const viewports = state.viewports.slice();
 
-        viewports[viewportIndex] = { displaySetInstanceUID };
+        viewports[viewportIndex] = { displaySetInstanceUID, imageIndex };
 
         return { ...state, ...{ viewports } };
       }
@@ -69,12 +69,13 @@ export function ViewportGridProvider({ children, service }) {
     [dispatch]
   );
   const setDisplaysetForViewport = useCallback(
-    ({ viewportIndex, displaySetInstanceUID }) =>
+    ({ viewportIndex, displaySetInstanceUID, imageIndex }) =>
       dispatch({
         type: 'SET_DISPLAYSET_FOR_VIEWPORT',
         payload: {
           viewportIndex,
           displaySetInstanceUID,
+          imageIndex
         },
       }),
     [dispatch]

platform/viewer/src/appExtensions/GenericViewerCommands/commandsModule.js

@@ -1,140 +0,0 @@
-import { redux } from '@ohif/core';
-import store from './../../store';
-
-const commandsModule = ({ commandsManager }) => {
-  const { setViewportActive, setActiveViewportSpecificData } = redux.actions;
-
-  const actions = {
-    updateActiveViewport: ({ viewports, direction }) => {
-      const { viewportSpecificData, activeViewportIndex } = viewports;
-      const maxIndex = Object.keys(viewportSpecificData).length - 1;
-
-      let newIndex = activeViewportIndex + direction;
-      newIndex = newIndex > maxIndex ? 0 : newIndex;
-      newIndex = newIndex < 0 ? maxIndex : newIndex;
-
-      store.dispatch(setViewportActive(newIndex));
-    },
-    setWindowLevelPreset: ({ viewports, preset }) => {
-      const state = store.getState();
-      const { preferences = {} } = state;
-      const { window, level } =
-        preferences.windowLevelData && preferences.windowLevelData[preset];
-
-      if (window && level) {
-        commandsManager.runCommand('setWindowLevel', {
-          viewports,
-          window,
-          level,
-        });
-      }
-    },
-    updateViewportDisplaySet: ({ viewports, direction }) => {
-      const viewportSpecificData = { ...viewports.viewportSpecificData };
-      const activeViewport =
-        viewportSpecificData[viewports.activeViewportIndex];
-      const studyMetadata = utils.studyMetadataManager.get(
-        activeViewport.StudyInstanceUID
-      );
-
-      if (!studyMetadata) {
-        return;
-      }
-
-      const allDisplaySets = studyMetadata.getDisplaySets();
-      const currentDisplaySetIndex = allDisplaySets.findIndex(
-        displaySet =>
-          displaySet.displaySetInstanceUID ===
-          activeViewport.displaySetInstanceUID
-      );
-      if (currentDisplaySetIndex < 0) {
-        return;
-      }
-
-      const newDisplaySetIndex = currentDisplaySetIndex + direction;
-      const newDisplaySetData = allDisplaySets[newDisplaySetIndex];
-      if (!newDisplaySetData) {
-        return;
-      }
-
-      store.dispatch(setActiveViewportSpecificData(newDisplaySetData));
-    },
-  };
-
-  const definitions = {
-    // Next/Previous active viewport
-    incrementActiveViewport: {
-      commandFn: actions.updateActiveViewport,
-      storeContexts: ['viewports'],
-      options: { direction: 1 },
-    },
-    decrementActiveViewport: {
-      commandFn: actions.updateActiveViewport,
-      storeContexts: ['viewports'],
-      options: { direction: -1 },
-    },
-    // Window level Presets
-    windowLevelPreset1: {
-      commandFn: actions.setWindowLevelPreset,
-      storeContexts: ['viewports'],
-      options: { preset: 1 },
-    },
-    windowLevelPreset2: {
-      commandFn: actions.setWindowLevelPreset,
-      storeContexts: ['viewports'],
-      options: { preset: 2 },
-    },
-    windowLevelPreset3: {
-      commandFn: actions.setWindowLevelPreset,
-      storeContexts: ['viewports'],
-      options: { preset: 3 },
-    },
-    windowLevelPreset4: {
-      commandFn: actions.setWindowLevelPreset,
-      storeContexts: ['viewports'],
-      options: { preset: 4 },
-    },
-    windowLevelPreset5: {
-      commandFn: actions.setWindowLevelPreset,
-      storeContexts: ['viewports'],
-      options: { preset: 5 },
-    },
-    windowLevelPreset6: {
-      commandFn: actions.setWindowLevelPreset,
-      storeContexts: ['viewports'],
-      options: { preset: 6 },
-    },
-    windowLevelPreset7: {
-      commandFn: actions.setWindowLevelPreset,
-      storeContexts: ['viewports'],
-      options: { preset: 7 },
-    },
-    windowLevelPreset8: {
-      commandFn: actions.setWindowLevelPreset,
-      storeContexts: ['viewports'],
-      options: { preset: 8 },
-    },
-    windowLevelPreset9: {
-      commandFn: actions.setWindowLevelPreset,
-      storeContexts: ['viewports'],
-      options: { preset: 9 },
-    },
-    nextViewportDisplaySet: {
-      commandFn: actions.updateViewportDisplaySet,
-      storeContexts: ['viewports'],
-      options: { direction: 1 },
-    },
-    previousViewportDisplaySet: {
-      commandFn: actions.updateViewportDisplaySet,
-      storeContexts: ['viewports'],
-      options: { direction: -1 },
-    },
-  };
-
-  return {
-    definitions,
-    defaultContext: 'VIEWER',
-  };
-};
-
-export default commandsModule;

platform/viewer/src/appExtensions/MeasurementsPanel/jumpToRowItem.js

@@ -1,118 +0,0 @@
-import { measurements, utils } from '@ohif/core';
-
-const { MeasurementApi } = measurements;
-const { studyMetadataManager } = utils;
-
-// TODO: Move this function to OHIF itself so we can use it on the OHIF measurment table (when it is finished)
-
-/**
- * Activates a set of measurements
- *
- * @param measurementData
- * @param viewportsState
- * @param timepointManagerState
- * @param options
- */
-export default function jumpToRowItem(
-  measurementData,
-  viewportsState,
-  timepointManagerState,
-  options = { invertViewportTimepointsOrder: false, childToolKey: null }
-) {
-  const numViewports = viewportsState.layout.viewports.length;
-  const numTimepoints = timepointManagerState.timepoints.length;
-  const { measurements, timepoints } = timepointManagerState;
-  const numViewportsToUpdate = Math.min(numTimepoints, numViewports);
-  const { toolType, measurementNumber } = measurementData;
-
-  if (options.invertViewportTimepointsOrder) {
-    timepoints.reverse();
-  }
-
-  const measurementsForToolGroup = measurements[toolType];
-
-  // Retrieve the measurements data
-  const measurementsToJumpTo = [];
-  for (let i = 0; i < numViewportsToUpdate; i++) {
-    const { timepointId } = timepoints[i];
-
-    const dataAtThisTimepoint = measurementsForToolGroup.find(entry => {
-      return (
-        entry.timepointId === timepointId &&
-        entry.measurementNumber === measurementNumber
-      );
-    });
-
-    if (!dataAtThisTimepoint) {
-      measurementsToJumpTo.push(null);
-      continue;
-    }
-
-    let measurement = dataAtThisTimepoint;
-
-    const { tool } = MeasurementApi.getToolConfiguration(toolType);
-    if (options.childToolKey) {
-      measurement = dataAtThisTimepoint[options.childToolKey];
-    } else if (Array.isArray(tool.childTools)) {
-      const key = tool.childTools.find(key => !!dataAtThisTimepoint[key]);
-      measurement = dataAtThisTimepoint[key];
-    }
-
-    measurementsToJumpTo.push(measurement);
-  }
-
-  // TODO: Add a single viewports state action which allows
-  // - viewportData to be set
-  // - layout to be set
-  // - activeViewport to be set
-
-  // Needs to update viewports.viewportData state to set image set data
-
-  const displaySetContainsSopInstance = (displaySet, SOPInstanceUID) => {
-    if (!displaySet.images || !displaySet.images.length) {
-      return;
-    }
-
-    return displaySet.images.find(
-      image => image.getSOPInstanceUID() === SOPInstanceUID
-    );
-  };
-
-  const viewportSpecificData = [];
-  measurementsToJumpTo.forEach((data, viewportIndex) => {
-    // Skip if there is no measurement to jump
-    if (!data) {
-      return;
-    }
-
-    const study = studyMetadataManager.get(data.StudyInstanceUID);
-    if (!study) {
-      throw new Error('Study not found.');
-    }
-
-    const displaySet = study.findDisplaySet(displaySet => {
-      return displaySetContainsSopInstance(displaySet, data.SOPInstanceUID);
-    });
-
-    if (!displaySet) {
-      throw new Error('Display set not found.');
-    }
-
-    displaySet.SOPInstanceUID = data.SOPInstanceUID;
-    if (data.frameIndex) {
-      displaySet.frameIndex = data.frameIndex;
-    }
-
-    viewportIndex =
-      (viewportIndex + viewportsState.activeViewportIndex) % numViewports;
-    viewportSpecificData.push({
-      viewportIndex,
-      displaySet,
-    });
-  });
-
-  return {
-    viewportSpecificData,
-    layout: [], // TODO: if we need to change layout, we should return this here
-  };
-}

platform/viewer/src/components/EmptyViewport.jsx

@@ -1,11 +1,7 @@
 import React from 'react';
 
 function EmptyViewport() {
-  return (
+  return <div></div>;
-    <div>
-      <p>Please drag a stack here to view images.</p>
-    </div>
-  );
 }
 
 export default EmptyViewport;

platform/viewer/src/components/Header/Header.css

@@ -1,142 +0,0 @@
-/* Viewer Route */
-.entry-header {
-  padding: 10px 15px;
-  height: var(--top-bar-height);
-}
-
-.header-left-box {
-  display: inline-block;
-  position: relative;
-}
-
-.header-brand {
-  text-decoration: none;
-  height: 30px;
-  float: left;
-  clear: both;
-}
-
-/* Home Page */
-.entry-header.header-big {
-  background: rgba(21, 25, 30, 0.7);
-  padding: 35px var(--study-list-padding);
-  height: auto;
-  display: inline-block;
-  width: 100%;
-}
-
-.entry-header.header-big .header-brand {
-  height: 50px;
-  padding: 0;
-}
-
-.entry-header.header-big .header-logo-image {
-  margin-right: 20px;
-  width: 50px;
-  height: 50px;
-}
-
-.entry-header.header-big .header-logo-text {
-  width: 474px;
-  height: auto;
-}
-
-/** OTHER STYLES **/
-
-.dd-item {
-  width: 100%;
-}
-
-.header-viewerLink {
-  float: left;
-}
-
-.header-logo-image {
-  fill: transparent;
-  height: 100%;
-  margin: 0 8px 0 0;
-  width: 30px;
-  float: left;
-}
-
-.header-btn {
-  color: var(--text-secondary-color);
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 26px;
-}
-
-.header-btn:hover {
-  color: var(--hover-color);
-}
-
-.header-btn:active {
-  color: var(--active-color);
-}
-
-.header-studyListLinkSection {
-  border-left: var(--ui-border-thickness) solid var(--ui-border-color);
-  margin: 3px 0 0 10px;
-  padding: 0 0 0 10px;
-  display: inline-block;
-}
-
-.header-menu {
-  color: var(--text-primary-color);
-  float: right;
-  padding: 4px 0;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 18px;
-  text-decoration: none;
-  margin-right: 10px;
-}
-
-.entry-header.header-big .header-menu {
-  margin-right: 0;
-}
-
-.header-menu .research-use {
-  float: left;
-  font-size: 13px;
-  font-weight: 700;
-  color: #91b9cd;
-  margin-right: 1rem;
-}
-
-.notification-bar {
-  display: none;
-  position: absolute;
-  height: 20px;
-  line-height: 20px;
-  width: 100%;
-  background-color: #91b9cd;
-  color: #ffffff;
-  font-weight: bold;
-  text-align: center;
-}
-
-@media only screen and (max-width: 768px) {
-  .entry-header,
-  .entry-header.header-big {
-    padding: 30px 15px 10px 15px;
-  }
-  .entry-header.header-big .header-logo-image {
-    margin: 0 10px 0 0;
-    width: 25px;
-    height: 25px;
-  }
-
-  .entry-header.header-big .header-logo-text {
-    width: 40%;
-  }
-
-  /* Toggle Notification Bar */
-  .notification-bar {
-    display: block;
-  }
-  .header-menu .research-use {
-    display: none;
-  }
-}

platform/viewer/src/components/Header/Header.js

@@ -1,124 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Link, withRouter } from 'react-router-dom';
-import { withTranslation } from 'react-i18next';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { Dropdown, AboutContent, withModal } from '@ohif/ui';
-//
-import { UserPreferences } from './../UserPreferences';
-import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
-import './Header.css';
-
-function Header(props) {
-  const {
-    t,
-    user,
-    userManager,
-    modal: { show },
-    useLargeLogo,
-    linkPath,
-    linkText,
-    location,
-    children,
-  } = props;
-
-  const [options, setOptions] = useState([]);
-  const hasLink = linkText && linkPath;
-
-  useEffect(() => {
-    const optionsValue = [
-      {
-        title: t('About'),
-        icon: { name: 'info' },
-        onClick: () =>
-          show({
-            content: AboutContent,
-            title: t('OHIF Viewer - About'),
-          }),
-      },
-      {
-        title: t('Preferences'),
-        icon: {
-          name: 'user',
-        },
-        onClick: () =>
-          show({
-            content: UserPreferences,
-            title: t('User Preferences'),
-          }),
-      },
-    ];
-
-    if (user && userManager) {
-      optionsValue.push({
-        title: t('Logout'),
-        icon: { name: 'power-off' },
-        onClick: () => userManager.signoutRedirect(),
-      });
-    }
-
-    setOptions(optionsValue);
-  }, [setOptions, show, t, user, userManager]);
-
-  return (
-    <>
-      <div className="notification-bar">{t('INVESTIGATIONAL USE ONLY')}</div>
-      <div
-        className={classNames('entry-header', { 'header-big': useLargeLogo })}
-      >
-        <div className="header-left-box">
-          {location && location.studyLink && (
-            <Link
-              to={location.studyLink}
-              className="header-btn header-viewerLink"
-            >
-              {t('Back to Viewer')}
-            </Link>
-          )}
-
-          {children}
-
-          {hasLink && (
-            <Link
-              className="header-btn header-studyListLinkSection"
-              to={{
-                pathname: linkPath,
-                state: { studyLink: location.pathname },
-              }}
-            >
-              {t(linkText)}
-            </Link>
-          )}
-        </div>
-
-        <div className="header-menu">
-          <span className="research-use">{t('INVESTIGATIONAL USE ONLY')}</span>
-          <Dropdown title={t('Options')} list={options} align="right" />
-        </div>
-      </div>
-    </>
-  );
-}
-
-Header.propTypes = {
-  // Study list, /
-  linkText: PropTypes.string,
-  linkPath: PropTypes.string,
-  useLargeLogo: PropTypes.bool,
-  //
-  location: PropTypes.object.isRequired,
-  children: PropTypes.node,
-  t: PropTypes.func.isRequired,
-  userManager: PropTypes.object,
-  user: PropTypes.object,
-  modal: PropTypes.object,
-};
-
-Header.defaultProps = {
-  useLargeLogo: false,
-  children: OHIFLogo(),
-};
-
-export default withTranslation(['Header', 'AboutModal'])(
-  withRouter(withModal(Header))
-);

platform/viewer/src/components/SidePanel.css

@@ -1,48 +0,0 @@
-.FlexboxLayout {
-  display: flex;
-  flex: 1;
-  flex-flow: row nowrap;
-  align-items: stretch;
-  height: calc(100% - var(--toolbar-height) - var(--top-bar-height));
-  width: 100%;
-  overflow: hidden;
-}
-
-.sidepanel {
-  flex: 1;
-  height: 100%;
-  transition: var(--sidepanel-transition);
-  overflow-y: auto;
-}
-
-.from-left {
-  border-right: var(--ui-border-thickness) solid var(--ui-border-color);
-  margin-left: calc(var(--left-sidepanel-menu-width) * -1);
-  max-width: var(--left-sidepanel-menu-width);
-}
-
-.from-right {
-  border-left: var(--ui-border-thickness) solid var(--ui-border-color);
-  margin-right: calc(var(--right-sidepanel-menu-width) * -1);
-  max-width: var(--right-sidepanel-menu-width);
-}
-
-.sidepanel.is-open {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-.main-content {
-  flex: 1;
-  height: 100%;
-  overflow: hidden;
-  transition: var(--sidepanel-transition);
-  width: 100%;
-}
-
-@media only screen and (max-width: 768px) {
-  /* Account for "Investigational Use" banner height */
-  .FlexboxLayout {
-    height: calc(100% - var(--toolbar-height) - var(--top-bar-height) - 16px);
-  }
-}

platform/viewer/src/customHooks/useQuery.js

@@ -1,11 +0,0 @@
-import { useLocation } from 'react-router-dom';
-
-/**
- * hook that builds on useLocation to parse
- * the query string for you.
- *
- * @name useQuery
- */
-export default function () {
-  return new URLSearchParams(useLocation().search);
-}

yarn.lock

@@ -7364,10 +7364,10 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
-dcmjs@0.14.1:
+dcmjs@0.14.2:
-  version "0.14.1"
+  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/dcmjs/-/dcmjs-0.14.1.tgz#4a4f18d1e5332d38429e2d77340a6ad0052ec71e"
+  resolved "https://registry.yarnpkg.com/dcmjs/-/dcmjs-0.14.2.tgz#bc4926c3312632ec61a5d68753c0857aebb65793"
-  integrity sha512-GGGQt4zjX7Fp0rLO5rcIQgmxZdLsEwBSZ1T74iXeJG5W32P1yiodJfBW900tNZCKj3zWamO3f5jDC1Xkv81fdg==
+  integrity sha512-W4/f34Ph6Nrc95QhL/7f1kPlfR2YJMbyEsbPELt3xml17SFnkEgXAeO41qHZ7KywozO/lBW5sXGOpMenuYVV2g==
   dependencies:
     "@babel/polyfill" "^7.8.3"
     "@babel/runtime" "^7.8.4"
@@ -17890,20 +17890,20 @@ react-clientside-effect@^1.2.2:
   dependencies:
     "@babel/runtime" "^7.0.0"
 
-react-cornerstone-viewport@2.3.8:
+react-cornerstone-viewport@2.3.9:
-  version "2.3.8"
+  version "2.3.9"
-  resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-2.3.8.tgz#7af8360f29bca986ae4e36b4e503269b88ddc52f"
+  resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-2.3.9.tgz#f9761da8e536f0a217137c6ca1a983f5882249f9"
-  integrity sha512-aiG2uVNrDY6SQx4t/HBxIA3zsMsCwT+6TpcXK9qSSoXhs+X6OTmYEKncWUqL0jtxU1yfh6JTUz8ARTg03gtF+A==
+  integrity sha512-qrhq8CbX/jq6b93cQjV2qC/mhHOvFBpxzxcHlvHzEQZt/rmRMcaYxCqjpNaNbUmmBu61wNkxesUVsggkPTTcqg==
   dependencies:
     classnames "^2.2.6"
     date-fns "^2.2.1"
     prop-types "^15.7.2"
     react-resize-detector "^4.2.1"
 
-react-cornerstone-viewport@2.3.9:
+react-cornerstone-viewport@3.0.0:
-  version "2.3.9"
+  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-2.3.9.tgz#f9761da8e536f0a217137c6ca1a983f5882249f9"
+  resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-3.0.0.tgz#c7be6dc29762fc844c639a73c3292feb69e31ba5"
-  integrity sha512-qrhq8CbX/jq6b93cQjV2qC/mhHOvFBpxzxcHlvHzEQZt/rmRMcaYxCqjpNaNbUmmBu61wNkxesUVsggkPTTcqg==
+  integrity sha512-hLneVVOrZZlCkIhsKVdIHBGVPbOmeu5tsrPXaeCfsOlA5y7JhtacjuKHL4xzGmlXiCipftgiZ9+4gC2gcJSlcw==
   dependencies:
     classnames "^2.2.6"
     date-fns "^2.2.1"