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) {
@@ -155,9 +154,9 @@ class OHIFCornerstoneViewport extends Component {
 
     if (
       displaySet.displaySetInstanceUID !==
-        prevDisplaySet.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',
-          measurementData: data ? { description: data.text } : {},
+          value: { label: data ? data.text : '' },
+          noCloseButton: true,
           onClose: () => UIDialogService.dismiss({ id: dialogId }),
-          onSubmit: value => {
-            callback(value);
+          actions: [
+            { 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>
+            );
+          },
         },
       });
     }
@@ -62,7 +93,7 @@ export default function init({ servicesManager, configuration }) {
   // THIS
   // is a way for extensions that "depend" on this extension to notify it of
   // new cornerstone enabled elements so it's commands continue to work.
-  const handleOhifCornerstoneEnabledElementEvent = function(evt) {
+  const handleOhifCornerstoneEnabledElementEvent = function (evt) {
     const { viewportIndex, enabledElement } = evt.detail;
 
     setEnabledElement(viewportIndex, enabledElement);
@@ -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. */