get ViewportDialog to display as a part of machine transition

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/TrackedMeasurementsContext.jsx

@@ -0,0 +1,81 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Machine } from 'xstate';
+import { useMachine } from '@xstate/react';
+import {
+  machineConfiguration,
+  defaultOptions,
+} from './measurementTrackingMachine';
+
+const TrackedMeasurementsContext = React.createContext();
+TrackedMeasurementsContext.displayName = 'TrackedMeasurementsContext';
+const useTrackedMeasurements = () => useContext(TrackedMeasurementsContext);
+
+/**
+ *
+ * @param {*} param0
+ */
+function TrackedMeasurementsContextProvider(
+  UIViewportDialogService,
+  { children }
+) {
+  function promptUser() {
+    // TODO: ... ActiveViewport? Or Study + Series --> Viewport?
+    // Let's just use zero for meow?
+    return new Promise(function(resolve, reject) {
+      const handleSubmit = result => {
+        UIViewportDialogService.hide();
+        resolve(result);
+      };
+
+      UIViewportDialogService.show({
+        viewportIndex: 0,
+        type: 'info',
+        message: 'Would you like to track?',
+        actions: [
+          { type: 'cancel', text: 'No', value: 0 },
+          { type: 'secondary', text: 'No, do not ask again', value: -1 },
+          { type: 'primary', text: 'Yes', value: 1 },
+        ],
+        onSubmit: handleSubmit,
+      });
+    });
+  }
+
+  const machOptions = Object.assign({}, defaultOptions);
+  // Merge services
+  machOptions.services = Object.assign({}, machOptions.services, {
+    shouldTrackPrompt: promptUser,
+  });
+
+  console.log(
+    '~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~',
+    machOptions
+  );
+
+  const measurementTrackingMachine = Machine(machineConfiguration, machOptions);
+
+  const [
+    trackedMeasurements,
+    sendTrackedMeasurementsEvent,
+    trackedMeasurementsService,
+  ] = useMachine(measurementTrackingMachine);
+
+  return (
+    <TrackedMeasurementsContext.Provider
+      value={[trackedMeasurements, sendTrackedMeasurementsEvent]}
+    >
+      {children}
+    </TrackedMeasurementsContext.Provider>
+  );
+}
+
+TrackedMeasurementsContextProvider.propTypes = {
+  children: PropTypes.oneOf([PropTypes.func, PropTypes.node]),
+};
+
+export {
+  TrackedMeasurementsContext,
+  TrackedMeasurementsContextProvider,
+  useTrackedMeasurements,
+};

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/index.js

@@ -1,45 +1,5 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import { useMachine } from '@xstate/react';
-import {
-  measurementTrackingMachine,
-  defaultOptions,
-} from './measurementTrackingMachine';
-
-const TrackedMeasurementsContext = React.createContext();
-
-TrackedMeasurementsContext.displayName = 'TrackedMeasurementsContext';
-
-const useTrackedMeasurements = () => useContext(TrackedMeasurementsContext);
-
-/**
- *
- * @param {*} param0
- */
-function TrackedMeasurementsContextProvider({ children }) {
-  // TODO: Configure `UIViewportNotificationService` for appropriate actions
-  const measurementTrackingMachineOptions = Object.assign({}, defaultOptions);
-  const [
-    trackedMeasurements,
-    sendTrackedMeasurementsEvent,
-    trackedMeasurementsService,
-  ] = useMachine(measurementTrackingMachine, measurementTrackingMachineOptions);
-
-  return (
-    <TrackedMeasurementsContext.Provider
-      value={[trackedMeasurements, sendTrackedMeasurementsEvent]}
-    >
-      {children}
-    </TrackedMeasurementsContext.Provider>
-  );
-}
-
-TrackedMeasurementsContextProvider.propTypes = {
-  children: PropTypes.oneOf([PropTypes.func, PropTypes.node]),
-};
-
 export {
   TrackedMeasurementsContext,
   TrackedMeasurementsContextProvider,
   useTrackedMeasurements,
-};
+} from './TrackedMeasurementsContext.jsx';

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/measurementTrackingMachine.js

@@ -27,7 +27,7 @@ const machineConfiguration = {
         prompt: {
           invoke: {
             id: 'shouldTrackPrompt',
-            src: () => confirmDialog('Should we start tracking?'),
+            src: 'shouldTrackPrompt',
             onDone: {
               target: 'validateResponse',
               actions: assign({ promptResponse: (ctx, evt) => evt.data }),
@@ -135,6 +135,11 @@ function confirmDialog(msg) {
 }
 
 const defaultOptions = {
+  services: {
+    shouldTrackPrompt: () => {
+      return confirmDialog('Should we start tracking?');
+    },
+  },
   actions: {
     clearContext: assign({
       prevTrackedStudy: '',
@@ -186,11 +191,13 @@ const defaultOptions = {
   },
 };
 
-const measurementTrackingMachine = Machine(machineConfiguration, defaultOptions);
+// const measurementTrackingMachine = Machine(
+//   machineConfiguration,
+//   defaultOptions
+// );
 // .transition(state, eventArgument).value
 // const service = interpret(measurementTrackingMachine).start();
 // .send(event): nextState
 // .state (getter)
 // .onTransition(state => { state.vale })
-export { defaultOptions, machineConfiguration, measurementTrackingMachine };
-export default measurementTrackingMachine;
+export { defaultOptions, machineConfiguration };

extensions/measurement-tracking/src/getContextModule.js

@@ -4,12 +4,18 @@ import {
   useTrackedMeasurements,
 } from './contexts';
 
-function getContextModule() {
+function getContextModule({ servicesManager }) {
+  const { UIViewportDialogService } = servicesManager.services;
+  const BoundTrackedMeasurementsContextProvider = TrackedMeasurementsContextProvider.bind(
+    null,
+    UIViewportDialogService
+  );
+
   return [
     {
       name: 'TrackedMeasurementsContext',
       context: TrackedMeasurementsContext,
-      provider: TrackedMeasurementsContextProvider,
+      provider: BoundTrackedMeasurementsContextProvider,
     },
   ];
 }

extensions/measurement-tracking/src/getViewportModule.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const Component = React.lazy(() => {
-  return import('./viewports/OHIFCornerstoneViewport');
+  return import('./viewports/TrackedCornerstoneViewport');
 });
 
 const OHIFCornerstoneViewport = props => {

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

@@ -3,12 +3,16 @@ import PropTypes from 'prop-types';
 import cornerstone from 'cornerstone-core';
 import CornerstoneViewport from 'react-cornerstone-viewport';
 import OHIF, { DicomMetadataStore } from '@ohif/core';
-import { ViewportActionBar, useViewportGrid } from '@ohif/ui';
+import {
+  Notification,
+  ViewportActionBar,
+  useViewportGrid,
+  useViewportDialog,
+} from '@ohif/ui';
 import debounce from 'lodash.debounce';
 import throttle from 'lodash.throttle';
 import { useTrackedMeasurements } from './../getContextModule';
 
-
 // const cine = viewportSpecificData.cine;
 
 // isPlaying = cine.isPlaying === true;
@@ -16,7 +20,7 @@ import { useTrackedMeasurements } from './../getContextModule';
 
 const { StackManager } = OHIF.utils;
 
-function OHIFCornerstoneViewport({
+function TrackedCornerstoneViewport({
   children,
   dataSource,
   displaySet,
@@ -24,6 +28,10 @@ function OHIFCornerstoneViewport({
 }) {
   const [trackedMeasurements] = useTrackedMeasurements();
   const [{ viewports }, dispatchViewportGrid] = useViewportGrid();
+  // viewportIndex, onSubmit
+  const [viewportDialogState, viewportDialogApi] = useViewportDialog();
+  console.warn('VIEWPORT DIALOG', viewportDialogState, viewportDialogApi);
+
   const [viewportData, setViewportData] = useState(null);
   // TODO: Still needed? Better way than import `OHIF` and destructure?
   // Why is this managed by `core`?
@@ -98,7 +106,7 @@ function OHIFCornerstoneViewport({
   // );
   // TODO: This display contains the meta for all instances.
   // That can't be right...
-  console.log('DISPLAYSET', displaySet)
+  console.log('DISPLAYSET', displaySet);
   // const seriesMeta = DicomMetadataStore.getSeries(this.props.displaySet.StudyInstanceUID, '');
   // console.log(seriesMeta);
 
@@ -145,22 +153,35 @@ function OHIFCornerstoneViewport({
           },
         }}
       />
-      <CornerstoneViewport
-        viewportIndex={viewportIndex}
-        imageIds={imageIds}
-        imageIdIndex={currentImageIdIndex}
-        // TODO: ViewportGrid Context?
-        isActive={true} // todo
-        isStackPrefetchEnabled={true} // todo
-        isPlaying={false}
-        frameRate={24}
-      />
-      {childrenWithProps}
+      {/* TODO: Viewport interface to accept stack or layers of content like this? */}
+      <div className="relative flex flex-row w-full h-full">
+        <CornerstoneViewport
+          viewportIndex={viewportIndex}
+          imageIds={imageIds}
+          imageIdIndex={currentImageIdIndex}
+          // TODO: ViewportGrid Context?
+          isActive={true} // todo
+          isStackPrefetchEnabled={true} // todo
+          isPlaying={false}
+          frameRate={24}
+        />
+        <div style={{ position: 'absolute' }}>
+          {viewportDialogState.viewportIndex === viewportIndex && (
+            <Notification
+              message={viewportDialogState.message}
+              type={viewportDialogState.type}
+              actions={viewportDialogState.actions}
+              onSubmit={viewportDialogState.onSubmit}
+            />
+          )}
+        </div>
+        {childrenWithProps}
+      </div>
     </>
   );
 }
 
-OHIFCornerstoneViewport.propTypes = {
+TrackedCornerstoneViewport.propTypes = {
   displaySet: PropTypes.object.isRequired,
   viewportIndex: PropTypes.number.isRequired,
   dataSource: PropTypes.object,
@@ -168,7 +189,7 @@ OHIFCornerstoneViewport.propTypes = {
   customProps: PropTypes.object,
 };
 
-OHIFCornerstoneViewport.defaultProps = {
+TrackedCornerstoneViewport.defaultProps = {
   customProps: {},
 };
 
@@ -207,6 +228,6 @@ async function _getViewportData(dataSource, displaySet) {
   };
 
   return viewportData;
-};
+}
 
-export default OHIFCornerstoneViewport;
+export default TrackedCornerstoneViewport;