Merge branch 'feat/v2-main' of https://github.com/OHIF/Viewers into fix/OHIF-37-thumbnailDoubleClick

extensions/default/src/ActionButtons.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, ButtonGroup, Icon, IconButton } from '@ohif/ui';
-
-function ActionButtons() {
-  return (
-    <React.Fragment>
-      <ButtonGroup onClick={() => alert('Export')}>
-        <Button
-          className="px-2 py-2 text-base text-white bg-black border-primary-main"
-          size="initial"
-          color="inherit"
-        >
-          Export
-        </Button>
-        <IconButton
-          className="px-2 text-white bg-black border-primary-main"
-          color="inherit"
-          size="initial"
-        >
-          <Icon name="arrow-down" />
-        </IconButton>
-      </ButtonGroup>
-      <Button
-        className="px-2 py-2 ml-2 text-base text-white bg-black border border-primary-main"
-        variant="outlined"
-        size="initial"
-        color="inherit"
-        onClick={() => alert('Create Report')}
-      >
-        Create Report
-      </Button>
-    </React.Fragment>
-  );
-}
-
-export default ActionButtons;

extensions/default/src/DicomWebDataSource/index.js

@@ -10,7 +10,10 @@ import { DicomMetadataStore, IWebApiDataSource, utils } from '@ohif/core';
 
 import getImageId from './utils/getImageId';
 import * as dcmjs from 'dcmjs';
-import { retrieveStudyMetadata } from './retrieveStudyMetadata.js';
+import {
+  retrieveStudyMetadata,
+  deleteStudyMetadataPromise,
+} from './retrieveStudyMetadata.js';
 
 const { DicomMetaDictionary, DicomDict } = dcmjs.data;
 
@@ -187,6 +190,7 @@ function createDicomWebApi(dicomWebConfig) {
         storeInstances(instances);
       });
     },
+    deleteStudyMetadataPromise,
     getImageIdsForDisplaySet(displaySet) {
       const images = displaySet.images;
       const imageIds = [];

extensions/default/src/PanelMeasurementTable.js

@@ -1,55 +1,170 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
-import { StudySummary, MeasurementTable } from '@ohif/ui';
+import PropTypes from 'prop-types';
-import ActionButtons from './ActionButtons.jsx';
+import { MeasurementTable } from '@ohif/ui';
+import { DicomMetadataStore } from '@ohif/core';
+import debounce from './debounce.js';
 
 export default function PanelMeasurementTable({
   servicesManager,
-  commandsManager,
+  // commandsManager,
 }) {
   const { MeasurementService } = servicesManager.services;
+  const [displayMeasurements, setDisplayMeasurements] = useState([]);
 
-  console.log('MeasurementTable rendering!!!!!!!!!!!!!');
+  useEffect(() => {
+    const debouncedSetDisplayMeasurements = debounce(
+      setDisplayMeasurements,
+      100
+    );
+    // ~~ Initial
+    setDisplayMeasurements(_getMappedMeasurements(MeasurementService));
 
-  const descriptionData = {
+    // ~~ Subscription
-    date: '07-Sep-2010',
+    const added = MeasurementService.EVENTS.MEASUREMENT_ADDED;
-    modality: 'CT',
+    const updated = MeasurementService.EVENTS.MEASUREMENT_UPDATED;
-    description: 'CHEST/ABD/PELVIS W CONTRAST',
+    const removed = MeasurementService.EVENTS.MEASUREMENT_REMOVED;
-  };
+    const subscriptions = [];
 
-  const activeMeasurementItem = 0;
+    [added, updated, removed].forEach(evt => {
+      subscriptions.push(
+        MeasurementService.subscribe(evt, () => {
+          debouncedSetDisplayMeasurements(
+            _getMappedMeasurements(MeasurementService)
+          );
+        }).unsubscribe
+      );
+    });
 
-  const measurementTableData = {
+    return () => {
-    title: 'Measurements',
+      subscriptions.forEach(unsub => {
-    amount: 10,
+        unsub();
-    data: new Array(10).fill({}).map((el, i) => ({
+      });
-      id: i + 1,
+    };
-      label: 'Label short description',
+  }, [MeasurementService]);
-      displayText: '24.0 x 24.0 mm (S:4, I:22)',
+
-      isActive: activeMeasurementItem === i + 1,
+  // const activeMeasurementItem = 0;
-    })),
-    onClick: id => setActiveMeasurementItem(s => (s === id ? null : id)),
-    onEdit: id => alert(`Edit: ${id}`),
-  };
 
   return (
     <>
       <div className="overflow-x-hidden overflow-y-auto invisible-scrollbar">
-        <StudySummary
-          date={descriptionData.date}
-          modality={descriptionData.modality}
-          description={descriptionData.description}
-        />
         <MeasurementTable
           title="Measurements"
-          amount={measurementTableData.data.length}
+          amount={displayMeasurements.length}
-          data={measurementTableData.data}
+          data={displayMeasurements}
           onClick={() => {}}
           onEdit={id => alert(`Edit: ${id}`)}
         />
       </div>
-      <div className="flex justify-center p-4">
-        <ActionButtons />
-      </div>
     </>
   );
 }
+
+PanelMeasurementTable.propTypes = {
+  servicesManager: PropTypes.shape({
+    services: PropTypes.shape({
+      MeasurementService: PropTypes.shape({
+        getMeasurements: PropTypes.func.isRequired,
+        subscribe: PropTypes.func.isRequired,
+        EVENTS: PropTypes.object.isRequired,
+        VALUE_TYPES: PropTypes.object.isRequired,
+      }).isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+function _getMappedMeasurements(MeasurementService) {
+  const measurements = MeasurementService.getMeasurements();
+  const mappedMeasurements = measurements.map((m, index) =>
+    _mapMeasurementToDisplay(m, index, MeasurementService.VALUE_TYPES)
+  );
+
+  return mappedMeasurements;
+}
+
+function _mapMeasurementToDisplay(measurement, index, types) {
+  const {
+    id,
+    label,
+    description,
+    // Reference IDs
+    referenceStudyUID,
+    referenceSeriesUID,
+    SOPInstanceUID,
+  } = measurement;
+  const instance = DicomMetadataStore.getInstance(
+    referenceStudyUID,
+    referenceSeriesUID,
+    SOPInstanceUID
+  );
+  const { PixelSpacing, SeriesNumber, InstanceNumber } = instance;
+
+  return {
+    id: index + 1,
+    label: '(empty)', // 'Label short description',
+    displayText:
+      _getDisplayText(
+        measurement,
+        PixelSpacing,
+        SeriesNumber,
+        InstanceNumber,
+        types
+      ) || [],
+    // TODO: handle one layer down
+    isActive: false, // activeMeasurementItem === i + 1,
+  };
+}
+
+function _getDisplayText(
+  measurement,
+  pixelSpacing,
+  seriesNumber,
+  instanceNumber,
+  types
+) {
+  const { type, points } = measurement;
+  const hasPixelSpacing =
+    pixelSpacing !== undefined &&
+    Array.isArray(pixelSpacing) &&
+    pixelSpacing.length === 2;
+  const [rowPixelSpacing, colPixelSpacing] = hasPixelSpacing
+    ? pixelSpacing
+    : [1, 1];
+  const unit = hasPixelSpacing ? 'mm' : 'px';
+
+  switch (type) {
+    case types.POLYLINE: {
+      const { length } = measurement;
+      const roundedLength = _round(length, 1);
+
+      return [
+        `${roundedLength} ${unit} (S:${seriesNumber}, I:${instanceNumber})`,
+      ];
+    }
+    case types.BIDIRECTIONAL: {
+      const { shortestDiameter, longestDiameter } = measurement;
+      const roundedShortestDiameter = _round(shortestDiameter, 1);
+      const roundedLongestDiameter = _round(longestDiameter, 1);
+
+      return [
+        `l: ${roundedLongestDiameter} ${unit} (S:${seriesNumber}, I:${instanceNumber})`,
+        `s: ${roundedShortestDiameter} ${unit}`,
+      ];
+    }
+    case types.ELLIPSE: {
+      const { area } = measurement;
+      const roundedArea = _round(area, 1);
+
+      return [
+        `${roundedArea} ${unit}2 (S:${seriesNumber}, I:${instanceNumber})`,
+      ];
+    }
+    case types.POINT: {
+      const { text } = measurement;
+      return [`${text} (S:${seriesNumber}, I:${instanceNumber})`];
+    }
+  }
+}
+
+function _round(value, decimals) {
+  return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
+}

extensions/default/src/Panels/PanelStudyBrowser.jsx

@@ -28,6 +28,8 @@ function PanelStudyBrowser({
   const [displaySets, setDisplaySets] = useState([]);
   const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
 
+  console.log(DisplaySetService);
+
   // ~~ studyDisplayList
   useEffect(() => {
     // Fetch all studies for the patient in each primary study
@@ -98,8 +100,9 @@ function PanelStudyBrowser({
     // DISPLAY_SETS_ADDED returns an array of DisplaySets that were added
     const SubscriptionDisplaySetsAdded = DisplaySetService.subscribe(
       DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
-      newDisplaySets => {
+      data => {
-        newDisplaySets.forEach(async dSet => {
+        const { displaySetsAdded } = data;
+        displaySetsAdded.forEach(async dSet => {
           const newImageSrcEntry = {};
           const displaySet = DisplaySetService.getDisplaySetByUID(
             dSet.displaySetInstanceUID

extensions/default/src/debounce.js

@@ -0,0 +1,21 @@
+// Returns a function, that, as long as it continues to be invoked, will not
+// be triggered. The function will be called after it stops being called for
+// N milliseconds. If `immediate` is passed, trigger the function on the
+// leading edge, instead of the trailing.
+function debounce(func, wait, immediate) {
+  var timeout;
+  return function() {
+    var context = this,
+      args = arguments;
+    var later = function() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}
+
+export default debounce;

extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js

@@ -250,12 +250,19 @@ function OHIFCornerstoneSRViewport({
           seriesDescription: SeriesDescription,
           modality: Modality,
           patientInformation: {
-            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
+            patientName: PatientName
+              ? OHIF.utils.formatPN(PatientName.Alphabetic)
+              : '',
             patientSex: PatientSex || '',
             patientAge: PatientAge || '',
             MRN: PatientID || '',
-            thickness: `${SliceThickness}mm`,
+            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
-            spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
+            spacing:
+              PixelSpacing && PixelSpacing.length
+                ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
+                    2
+                  )}mm`
+                : '',
             scanner: ManufacturerModelName || '',
           },
         }}

extensions/dicom-sr/src/getSopClassHandlerModule.js

@@ -103,10 +103,11 @@ function _getDisplaySetsFromSeries(
   // Subscribe to new displaySets as the source may come in after.
   DisplaySetService.subscribe(
     DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
-    newDisplaySets => {
+    data => {
+      const { displaySetsAdded } = data;
       // If there are still some measurements that have not yet been loaded into cornerstone,
       // See if we can load them onto any of the new displaySets.
-      newDisplaySets.forEach(newDisplaySet => {
+      displaySetsAdded.forEach(newDisplaySet => {
         _checkIfCanAddMeasurementsToDisplaySet(
           displaySet,
           newDisplaySet,

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

@@ -6,6 +6,9 @@ import {
   machineConfiguration,
   defaultOptions,
 } from './measurementTrackingMachine';
+import promptBeginTracking from './promptBeginTracking';
+import promptTrackNewSeries from './promptTrackNewSeries';
+import promptTrackNewStudy from './promptTrackNewStudy';
 
 const TrackedMeasurementsContext = React.createContext();
 TrackedMeasurementsContext.displayName = 'TrackedMeasurementsContext';
@@ -19,41 +22,20 @@ function TrackedMeasurementsContextProvider(
   UIViewportDialogService,
   { children }
 ) {
-  function promptUser(message, ctx, evt) {
-    const { viewportIndex, StudyInstanceUID, SeriesInstanceUID } = evt;
-
-    return new Promise(function(resolve, reject) {
-      /**
-       * TODO: Will have issues if "SeriesInstanceUID" exists in multiple displaySets?
-       *
-       * @param {number} result - -1 | 0 | 1 --> deny | cancel | accept
-       * @return resolve { userResponse: number, StudyInstanceUID: string, SeriesInstanceUID: string }
-       */
-      const handleSubmit = result => {
-        UIViewportDialogService.hide();
-        resolve({ userResponse: result, StudyInstanceUID, SeriesInstanceUID });
-      };
-
-      UIViewportDialogService.show({
-        viewportIndex,
-        type: 'info',
-        message,
-        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,
-      });
-    });
-  }
-
-  // Set StateMachine behavior for prompts (invoked services)
   const machineOptions = Object.assign({}, defaultOptions);
   machineOptions.services = Object.assign({}, machineOptions.services, {
-    promptBeginTracking: promptUser.bind(null, 'Start tracking?'),
+    promptBeginTracking: promptBeginTracking.bind(
-    promptTrackNewStudy: promptUser.bind(null, 'New study?'),
+      null,
-    promptTrackNewSeries: promptUser.bind(null, 'New series?'),
+      UIViewportDialogService
+    ),
+    promptTrackNewSeries: promptTrackNewSeries.bind(
+      null,
+      UIViewportDialogService
+    ),
+    promptTrackNewStudy: promptTrackNewStudy.bind(
+      null,
+      UIViewportDialogService
+    ),
   });
 
 

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

@@ -1,5 +1,13 @@
 import { assign } from 'xstate';
 
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  CREATE_REPORT: 1,
+  ADD_SERIES: 2,
+  SET_STUDY_AND_SERIES: 3,
+};
+
 const machineConfiguration = {
   id: 'measurementTracking',
   initial: 'idle',
@@ -24,11 +32,11 @@ const machineConfiguration = {
           {
             target: 'tracking',
             actions: ['setTrackedStudyAndSeries'],
-            cond: 'promptAccepted',
+            cond: 'shouldSetStudyAndSeries',
           },
           {
             target: 'off',
-            cond: 'promptDeclined',
+            cond: 'shouldKillMachine',
           },
           {
             target: 'idle',
@@ -63,15 +71,21 @@ const machineConfiguration = {
         ],
       },
     },
-    promptTrackNewStudy: {
+    promptTrackNewSeries: {
       invoke: {
-        src: 'promptTrackNewStudy',
+        src: 'promptTrackNewSeries',
         onDone: [
           {
             target: 'tracking',
-            actions: ['setTrackedStudyAndSeries'],
+            actions: ['addTrackedSeries'],
-            cond: 'promptAccepted',
+            cond: 'shouldAddSeries',
           },
+          {
+            target: 'tracking',
+            actions: ['setTrackedStudyAndSeries'],
+            cond: 'shouldSetStudyAndSeries',
+          },
+          // CREATE_REPORT && CANCEL
           {
             target: 'tracking',
           },
@@ -81,14 +95,14 @@ const machineConfiguration = {
         },
       },
     },
-    promptTrackNewSeries: {
+    promptTrackNewStudy: {
       invoke: {
-        src: 'promptTrackNewSeries',
+        src: 'promptTrackNewStudy',
         onDone: [
           {
             target: 'tracking',
-            actions: ['addTrackedSeries'],
+            actions: ['setTrackedStudyAndSeries'],
-            cond: 'promptAccepted',
+            cond: 'shouldSetStudyAndSeries',
           },
           {
             target: 'tracking',
@@ -135,9 +149,12 @@ const defaultOptions = {
     })),
   },
   guards: {
-    promptAccepted: (ctx, evt) => evt.data && evt.data.userResponse === 1,
+    shouldKillMachine: (ctx, evt) =>
-    promptCanceled: (ctx, evt) => evt.data && evt.data.userResponse === 0,
+      evt.data && evt.data.userResponse === RESPONSE.NO_NEVER,
-    promptDeclined: (ctx, evt) => evt.data && evt.data.userResponse === -1,
+    shouldAddSeries: (ctx, evt) =>
+      evt.data && evt.data.userResponse === RESPONSE.ADD_SERIES,
+    shouldSetStudyAndSeries: (ctx, evt) =>
+      evt.data && evt.data.userResponse === RESPONSE.SET_STUDY_AND_SERIES,
     // Has more than 1, or SeriesInstanceUID is not in list
     // --> Post removal would have non-empty trackedSeries array
     hasRemainingTrackedSeries: (ctx, evt) =>
@@ -149,13 +166,4 @@ const 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 };

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

@@ -0,0 +1,61 @@
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  CREATE_REPORT: 1,
+  ADD_SERIES: 2,
+  SET_STUDY_AND_SERIES: 3,
+};
+
+function promptUser(UIViewportDialogService, ctx, evt) {
+  const { viewportIndex, StudyInstanceUID, SeriesInstanceUID } = evt;
+
+  return new Promise(async function(resolve, reject) {
+    let promptResult = await _askTrackMeasurements(
+      UIViewportDialogService,
+      viewportIndex
+    );
+
+    resolve({
+      userResponse: promptResult,
+      StudyInstanceUID,
+      SeriesInstanceUID,
+    });
+  });
+}
+
+function _askTrackMeasurements(UIViewportDialogService, viewportIndex) {
+  return new Promise(function(resolve, reject) {
+    const message = 'Track measurements for this series?';
+    const actions = [
+      { type: 'cancel', text: 'No', value: RESPONSE.CANCEL },
+      {
+        type: 'secondary',
+        text: 'No, do not ask again',
+        value: RESPONSE.NO_NEVER,
+      },
+      {
+        type: 'primary',
+        text: 'Yes',
+        value: RESPONSE.SET_STUDY_AND_SERIES,
+      },
+    ];
+    const onSubmit = result => {
+      UIViewportDialogService.hide();
+      resolve(result);
+    };
+
+    UIViewportDialogService.show({
+      viewportIndex,
+      type: 'info',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        UIViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+    });
+  });
+}
+
+export default promptUser;

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

@@ -0,0 +1,110 @@
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  CREATE_REPORT: 1,
+  ADD_SERIES: 2,
+  SET_STUDY_AND_SERIES: 3,
+};
+
+function promptUser(UIViewportDialogService, ctx, evt) {
+  const { viewportIndex, StudyInstanceUID, SeriesInstanceUID } = evt;
+
+  return new Promise(async function(resolve, reject) {
+    let promptResult = await _askShouldAddMeasurements(
+      UIViewportDialogService,
+      viewportIndex
+    );
+
+    if (promptResult === RESPONSE.CREATE_REPORT) {
+      promptResult = await _askSaveDiscardOrCancel(
+        UIViewportDialogService,
+        viewportIndex
+      );
+    }
+
+    // TODO: Hook into @JamesAPetts createReport
+    if (promptResult === RESPONSE.CREATE_REPORT) {
+      window.alert('CREATE REPORT');
+    }
+
+    resolve({
+      userResponse: promptResult,
+      StudyInstanceUID,
+      SeriesInstanceUID,
+    });
+  });
+}
+
+function _askShouldAddMeasurements(UIViewportDialogService, viewportIndex) {
+  return new Promise(function(resolve, reject) {
+    const message =
+      'Do you want to add this measurement to the existing report?';
+    const actions = [
+      { type: 'cancel', text: 'Cancel', value: RESPONSE.CANCEL },
+      {
+        type: 'secondary',
+        text: 'Create new report',
+        value: RESPONSE.CREATE_REPORT,
+      },
+      {
+        type: 'primary',
+        text: 'Add to existing report',
+        value: RESPONSE.ADD_SERIES,
+      },
+    ];
+    const onSubmit = result => {
+      UIViewportDialogService.hide();
+      resolve(result);
+    };
+
+    UIViewportDialogService.show({
+      viewportIndex,
+      type: 'info',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        UIViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+    });
+  });
+}
+
+function _askSaveDiscardOrCancel(UIViewportDialogService, viewportIndex) {
+  return new Promise(function(resolve, reject) {
+    const message =
+      'You have existing tracked measurements. What would you like to do with your existing tracked measurements?';
+    const actions = [
+      { type: 'cancel', text: 'Cancel', value: RESPONSE.CANCEL },
+      {
+        type: 'secondary',
+        text: 'Save in report',
+        value: RESPONSE.CREATE_REPORT,
+      },
+      {
+        type: 'primary',
+        text: 'Discard',
+        value: RESPONSE.SET_STUDY_AND_SERIES,
+      },
+    ];
+    const onSubmit = result => {
+      UIViewportDialogService.hide();
+      resolve(result);
+    };
+
+    UIViewportDialogService.show({
+      viewportIndex,
+      type: 'warning',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        UIViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+    });
+  });
+}
+
+export default promptUser;

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

@@ -0,0 +1,104 @@
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  CREATE_REPORT: 1,
+  ADD_SERIES: 2,
+  SET_STUDY_AND_SERIES: 3,
+};
+
+function promptUser(UIViewportDialogService, ctx, evt) {
+  const { viewportIndex, StudyInstanceUID, SeriesInstanceUID } = evt;
+
+  return new Promise(async function(resolve, reject) {
+    let promptResult = await _askTrackMeasurements(
+      UIViewportDialogService,
+      viewportIndex
+    );
+
+    if (promptResult === RESPONSE.SET_STUDY_AND_SERIES) {
+      promptResult = await _askSaveDiscardOrCancel(
+        UIViewportDialogService,
+        viewportIndex
+      );
+    }
+
+    // TODO: Hook into @JamesAPetts createReport
+    if (promptResult === RESPONSE.CREATE_REPORT) {
+      window.alert('CREATE REPORT');
+    }
+
+    resolve({
+      userResponse: promptResult,
+      StudyInstanceUID,
+      SeriesInstanceUID,
+    });
+  });
+}
+
+function _askTrackMeasurements(UIViewportDialogService, viewportIndex) {
+  return new Promise(function(resolve, reject) {
+    const message = 'Track measurements for this series?';
+    const actions = [
+      { type: 'cancel', text: 'No', value: RESPONSE.CANCEL },
+      {
+        type: 'primary',
+        text: 'Yes',
+        value: RESPONSE.SET_STUDY_AND_SERIES,
+      },
+    ];
+    const onSubmit = result => {
+      UIViewportDialogService.hide();
+      resolve(result);
+    };
+
+    UIViewportDialogService.show({
+      viewportIndex,
+      type: 'info',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        UIViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+    });
+  });
+}
+
+function _askSaveDiscardOrCancel(UIViewportDialogService, viewportIndex) {
+  return new Promise(function(resolve, reject) {
+    const message =
+      'Measurements cannot span across multiple studies. Do you want to save your tracked measurements?';
+    const actions = [
+      { type: 'cancel', text: 'Cancel', value: RESPONSE.CANCEL },
+      {
+        type: 'secondary',
+        text: 'No, discard previosuly tracked series & measurements',
+        value: RESPONSE.SET_STUDY_AND_SERIES,
+      },
+      {
+        type: 'primary',
+        text: 'Yes',
+        value: RESPONSE.CREATE_REPORT,
+      },
+    ];
+    const onSubmit = result => {
+      UIViewportDialogService.hide();
+      resolve(result);
+    };
+
+    UIViewportDialogService.show({
+      viewportIndex,
+      type: 'warning',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        UIViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+    });
+  });
+}
+
+export default promptUser;

extensions/measurement-tracking/src/getViewportModule.js

@@ -12,8 +12,19 @@ const OHIFCornerstoneViewport = props => {
   );
 };
 
-function getViewportModule({ commandsManager }) {
+function getViewportModule({ servicesManager }) {
-  return [{ name: 'cornerstone-tracked', component: OHIFCornerstoneViewport }];
+  const ExtendedOHIFCornerstoneSRViewport = props => {
+    const { ToolBarService } = servicesManager.services;
+
+    return (
+      <OHIFCornerstoneViewport
+        ToolBarService={ToolBarService}
+        {...props}
+      />
+    );
+  };
+
+  return [{ name: 'cornerstone-tracked', component: ExtendedOHIFCornerstoneSRViewport }];
 }
 
 export default getViewportModule;

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

@@ -5,9 +5,6 @@ import { DicomMetadataStore, DICOMSR } from '@ohif/core';
 import { useDebounce } from '@hooks';
 import ActionButtons from './ActionButtons';
 import { useTrackedMeasurements } from '../../getContextModule';
-import cornerstoneTools from 'cornerstone-tools';
-import cornerstone from 'cornerstone-core';
-import dcmjs from 'dcmjs';
 
 const DISPLAY_STUDY_SUMMARY_INITIAL_VALUE = {
   key: undefined, //
@@ -24,7 +21,12 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     measurementChangeTimestamp,
     200
   );
-  const { MeasurementService } = servicesManager.services;
+  const {
+    MeasurementService,
+    UINotificationService,
+    UIDialogService,
+    DisplaySetService,
+  } = servicesManager.services;
   const [
     trackedMeasurements,
     sendTrackedMeasurementsEvent,
@@ -34,9 +36,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     DISPLAY_STUDY_SUMMARY_INITIAL_VALUE
   );
   const [displayMeasurements, setDisplayMeasurements] = useState([]);
-  // TODO: measurements subscribtion
 
-  // Initial?
   useEffect(() => {
     const measurements = MeasurementService.getMeasurements();
     const filteredMeasurements = measurements.filter(
@@ -105,7 +105,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
 
   const activeMeasurementItem = 0;
 
-  const onExportClick = () => {
+  const exportReport = () => {
     const measurements = MeasurementService.getMeasurements();
     const trackedMeasurements = measurements.filter(
       m =>
@@ -117,21 +117,50 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     DICOMSR.downloadReport(trackedMeasurements, dataSource);
   };
 
-  const onCreateReportClick = () => {
+  const createReport = async () => {
-    const measurements = MeasurementService.getMeasurements();
+    const loadingDialogId = UIDialogService.create({
-    const trackedMeasurements = measurements.filter(
+      showOverlay: true,
-      m =>
+      isDraggable: false,
-        trackedStudy === m.referenceStudyUID &&
+      centralize: true,
-        trackedSeries.includes(m.referenceSeriesUID)
+      // TODO: Create a loading indicator component + zeplin design?
-    );
+      content: () => <div className="text-primary-active">Loading...</div>,
+    });
 
+    try {
+      const measurements = MeasurementService.getMeasurements();
+      const trackedMeasurements = measurements.filter(
+        m =>
+          trackedStudy === m.referenceStudyUID &&
+          trackedSeries.includes(m.referenceSeriesUID)
+      );
 
-    const dataSources = extensionManager.getDataSources();
+      const dataSources = extensionManager.getDataSources();
-    // TODO -> Eventually deal with multiple dataSources.
+      // TODO -> Eventually deal with multiple dataSources.
-    // Would need some way of saying which one is the "push" dataSource
+      // Would need some way of saying which one is the "push" dataSource
-    const dataSource = dataSources[0];
+      const dataSource = dataSources[0];
 
-    DICOMSR.storeMeasurements(trackedMeasurements, dataSource);
+      const naturalizedReport = await DICOMSR.storeMeasurements(
+        trackedMeasurements,
+        dataSource
+      );
+
+      DisplaySetService.makeDisplaySets([naturalizedReport], {
+        madeInClient: true,
+      });
+      UINotificationService.show({
+        title: 'STOW SR',
+        message: 'Measurements saved successfully',
+        type: 'success',
+      });
+    } catch (error) {
+      UINotificationService.show({
+        title: 'STOW SR',
+        message: error.message || 'Failed to store measurements',
+        type: 'error',
+      });
+    } finally {
+      UIDialogService.dismiss({ id: loadingDialogId });
+    }
   };
 
   return (
@@ -154,15 +183,24 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
       </div>
       <div className="flex justify-center p-4">
         <ActionButtons
-          onExportClick={onExportClick}
+          onExportClick={exportReport}
-          onCreateReportClick={onCreateReportClick}
+          onCreateReportClick={createReport}
         />
       </div>
     </>
   );
 }
 
-PanelMeasurementTableTracking.propTypes = {};
+PanelMeasurementTableTracking.propTypes = {
+  servicesManager: PropTypes.shape({
+    services: PropTypes.shape({
+      MeasurementService: PropTypes.shape({
+        getMeasurements: PropTypes.func.isRequired,
+        VALUE_TYPES: PropTypes.object.isRequired,
+      }).isRequired,
+    }).isRequired,
+  }).isRequired,
+};
 
 // TODO: This could be a MeasurementService mapper
 function _mapMeasurementToDisplay(measurement, index, types) {
@@ -182,9 +220,6 @@ function _mapMeasurementToDisplay(measurement, index, types) {
   );
   const { PixelSpacing, SeriesNumber, InstanceNumber } = instance;
 
-  console.log('mapping....', measurement);
-  console.log(instance);
-
   return {
     id: index + 1,
     label: '(empty)', // 'Label short description',
@@ -213,15 +248,7 @@ function _getDisplayText(
   instanceNumber,
   types
 ) {
-  // TODO: determination of shape influences text
-  // Length:  'xx.x unit (S:x, I:x)'
-  // Rectangle: 'xx.x x xx.x unit (S:x, I:x)',
-  // Ellipse?
-  // Bidirectional?
-  // Freehand?
-
   const { type, points } = measurement;
-
   const hasPixelSpacing =
     pixelSpacing !== undefined &&
     Array.isArray(pixelSpacing) &&
@@ -232,18 +259,16 @@ function _getDisplayText(
   const unit = hasPixelSpacing ? 'mm' : 'px';
 
   switch (type) {
-    case types.POLYLINE:
+    case types.POLYLINE: {
       const { length } = measurement;
-
       const roundedLength = _round(length, 1);
 
       return [
         `${roundedLength} ${unit} (S:${seriesNumber}, I:${instanceNumber})`,
       ];
-
+    }
-    case types.BIDIRECTIONAL:
+    case types.BIDIRECTIONAL: {
       const { shortestDiameter, longestDiameter } = measurement;
-
       const roundedShortestDiameter = _round(shortestDiameter, 1);
       const roundedLongestDiameter = _round(longestDiameter, 1);
 
@@ -251,16 +276,19 @@ function _getDisplayText(
         `l: ${roundedLongestDiameter} ${unit} (S:${seriesNumber}, I:${instanceNumber})`,
         `s: ${roundedShortestDiameter} ${unit}`,
       ];
-    case types.ELLIPSE:
+    }
+    case types.ELLIPSE: {
       const { area } = measurement;
-
       const roundedArea = _round(area, 1);
+
       return [
         `${roundedArea} ${unit}2 (S:${seriesNumber}, I:${instanceNumber})`,
       ];
-    case types.POINT:
+    }
+    case types.POINT: {
       const { text } = measurement;
       return [`${text} (S:${seriesNumber}, I:${instanceNumber})`];
+    }
   }
 }
 

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx

@@ -37,6 +37,7 @@ function PanelStudyBrowserTracking({
   const [studyDisplayList, setStudyDisplayList] = useState([]);
   const [displaySets, setDisplaySets] = useState([]);
   const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
+  const [jumpToDisplaySet, setJumpToDisplaySet] = useState(null);
 
   const onClickThumbnailHandler = displaySetInstanceUID => {
     viewportGridService.setDisplaysetForViewport({
@@ -149,18 +150,26 @@ function PanelStudyBrowserTracking({
     // DISPLAY_SETS_ADDED returns an array of DisplaySets that were added
     const SubscriptionDisplaySetsAdded = DisplaySetService.subscribe(
       DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
-      newDisplaySets => {
+      data => {
-        newDisplaySets.forEach(async dSet => {
+        const { displaySetsAdded, options } = data;
+        displaySetsAdded.forEach(async dSet => {
+          const displaySetInstanceUID = dSet.displaySetInstanceUID;
+
           const newImageSrcEntry = {};
           const displaySet = DisplaySetService.getDisplaySetByUID(
-            dSet.displaySetInstanceUID
+            displaySetInstanceUID
           );
+
+          if (options.madeInClient) {
+            setJumpToDisplaySet(displaySetInstanceUID);
+          }
+
           const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
           const imageId = imageIds[Math.floor(imageIds.length / 2)];
           // TODO: Is it okay that imageIds are not returned here for SR displaysets?
           if (imageId) {
             // When the image arrives, render it and store the result in the thumbnailImgSrcMap
-            newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(
+            newImageSrcEntry[displaySetInstanceUID] = await getImageSrc(
               imageId
             );
             setThumbnailImageSrcMap(prevState => {
@@ -227,6 +236,51 @@ function PanelStudyBrowserTracking({
     }
   }
 
+  useEffect(() => {
+    if (jumpToDisplaySet) {
+      // Get element by displaySetInstanceUID
+      const displaySetInstanceUID = jumpToDisplaySet;
+      const element = document.getElementById(
+        `thumbnail-${displaySetInstanceUID}`
+      );
+
+      if (element && typeof element.scrollIntoView === 'function') {
+        // TODO: Any way to support IE here?
+        element.scrollIntoView({ behavior: 'smooth' });
+
+        setJumpToDisplaySet(null);
+      }
+    }
+  }, [jumpToDisplaySet, expandedStudyInstanceUIDs, activeTabName]);
+
+  useEffect(() => {
+    if (!jumpToDisplaySet) {
+      return;
+    }
+
+    const displaySetInstanceUID = jumpToDisplaySet;
+    // Set the activeTabName and expand the study
+    const thumbnailLocation = _findTabAndStudyOfDisplaySet(
+      displaySetInstanceUID,
+      tabs
+    );
+    if (!thumbnailLocation) {
+      console.warn('jumpToThumbnail: displaySet thumbnail not found.');
+
+      return;
+    }
+    const { tabName, StudyInstanceUID } = thumbnailLocation;
+    setActiveTabName(tabName);
+    const studyExpanded = expandedStudyInstanceUIDs.includes(StudyInstanceUID);
+    if (!studyExpanded) {
+      const updatedExpandedStudyInstanceUIDs = [
+        ...expandedStudyInstanceUIDs,
+        StudyInstanceUID,
+      ];
+      setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
+    }
+  }, [jumpToDisplaySet]);
+
   return (
     <StudyBrowser
       tabs={tabs}
@@ -306,8 +360,11 @@ function _mapDisplaySets(
     const firstViewportIndexWithMatchingDisplaySetUid = viewports.findIndex(
       vp => vp.displaySetInstanceUID === ds.displaySetInstanceUID
     );
+
     const viewportIdentificator =
-      _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid] || '';
+      viewports.length > 1
+        ? _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid]
+        : '';
 
     const array =
       componentType === 'thumbnailTracked'
@@ -413,3 +470,24 @@ function _createStudyBrowserTabs(
 
   return tabs;
 }
+
+function _findTabAndStudyOfDisplaySet(displaySetInstanceUID, tabs) {
+  for (let t = 0; t < tabs.length; t++) {
+    const { studies } = tabs[t];
+
+    for (let s = 0; s < studies.length; s++) {
+      const { displaySets } = studies[s];
+
+      for (let d = 0; d < displaySets.length; d++) {
+        const displaySet = displaySets[d];
+
+        if (displaySet.displaySetInstanceUID === displaySetInstanceUID) {
+          return {
+            tabName: tabs[t].name,
+            StudyInstanceUID: studies[s].studyInstanceUid,
+          };
+        }
+      }
+    }
+  }
+}

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

@@ -12,6 +12,8 @@ import {
 } from '@ohif/ui';
 import { useTrackedMeasurements } from './../getContextModule';
 
+import ViewportOverlay from './ViewportOverlay';
+
 const { formatDate } = utils;
 
 // TODO -> Get this list from the list of tracked measurements.
@@ -38,6 +40,7 @@ function TrackedCornerstoneViewport({
   dataSource,
   displaySet,
   viewportIndex,
+  ToolBarService
 }) {
   const [trackedMeasurements] = useTrackedMeasurements();
   const [{ activeViewportIndex, viewports }] = useViewportGrid();
@@ -225,20 +228,25 @@ function TrackedCornerstoneViewport({
     PatientAge,
     SliceThickness,
     PixelSpacing,
-    ManufacturerModelName
+    ManufacturerModelName,
   } = displaySet.images[0];
 
   if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) {
     setIsTracked(!isTracked);
   }
 
+  const label =
+    viewports.length > 1
+      ? _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid]
+      : '';
+
   return (
     <>
       <ViewportActionBar
         onSeriesChange={direction => alert(`Series ${direction}`)}
         showNavArrows={viewportIndex === activeViewportIndex}
         studyData={{
-          label: _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid],
+          label,
           isTracked: trackedSeries.includes(SeriesInstanceUID),
           isLocked: false,
           studyDate: formatDate(SeriesDate), // TODO: This is series date. Is that ok?
@@ -246,12 +254,19 @@ function TrackedCornerstoneViewport({
           seriesDescription: SeriesDescription,
           modality: Modality,
           patientInformation: {
-            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
+            patientName: PatientName
+              ? OHIF.utils.formatPN(PatientName.Alphabetic)
+              : '',
             patientSex: PatientSex || '',
             patientAge: PatientAge || '',
             MRN: PatientID || '',
-            thickness: `${SliceThickness}mm`,
+            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
-            spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
+            spacing:
+              PixelSpacing && PixelSpacing.length
+                ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
+                    2
+                  )}mm`
+                : '',
             scanner: ManufacturerModelName || '',
           },
         }}
@@ -268,7 +283,15 @@ function TrackedCornerstoneViewport({
           isStackPrefetchEnabled={true} // todo
           isPlaying={false}
           frameRate={24}
-          isOverlayVisible={false}
+          isOverlayVisible={true}
+          viewportOverlayComponent={props => {
+            return (
+              <ViewportOverlay
+                {...props}
+                activeTools={ToolBarService.getActiveTools()}
+              />
+            );
+          }}
         />
         <div className="absolute w-full">
           {viewportDialogState.viewportIndex === viewportIndex && (
@@ -277,6 +300,7 @@ function TrackedCornerstoneViewport({
               type={viewportDialogState.type}
               actions={viewportDialogState.actions}
               onSubmit={viewportDialogState.onSubmit}
+              onOutsideClick={viewportDialogState.onOutsideClick}
             />
           )}
         </div>

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cornerstone from 'cornerstone-core';
+import classnames from 'classnames';
+
+const ViewportOverlay = ({
+  imageId,
+  scale,
+  windowWidth,
+  windowCenter,
+  imageIndex,
+  stackSize,
+  activeTools
+}) => {
+  const topLeft = 'top-viewport left-viewport';
+  const topRight = 'top-viewport right-viewport-scrollbar';
+  const bottomRight = 'bottom-viewport right-viewport-scrollbar';
+  const bottomLeft = 'bottom-viewport left-viewport';
+  const overlay = 'absolute pointer-events-none';
+
+  const isZoomActive = activeTools.includes('Zoom');
+  const isWwwcActive = activeTools.includes('Wwwc');
+
+  if (!imageId) {
+    return null;
+  }
+
+  const generalImageModule = cornerstone.metaData.get('generalImageModule', imageId) || {};
+  const { instanceNumber } = generalImageModule;
+
+  return (
+    <div className="text-primary-light">
+      <div className={classnames(overlay, topLeft)}>
+        {isZoomActive && (
+          <div className="flex flex-row">
+            <span className="mr-1">Zoom:</span>
+            <span className="font-thin">{scale.toFixed(2)}x</span>
+          </div>
+        )}
+        {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="mr-1">L:</span>
+            <span className="font-thin ml-1">{windowCenter.toFixed(0)}</span>
+          </div>
+        )}
+      </div>
+      <div className={classnames(overlay, topRight)}>
+        {stackSize > 1 && (
+          <div className="flex flex-row">
+            <span className="mr-1">I:</span>
+            <span className="font-thin">
+              {`${instanceNumber}/${stackSize}`}
+            </span>
+          </div>
+        )}
+      </div>
+      <div className={classnames(overlay, bottomRight)}>
+      </div>
+      <div className={classnames(overlay, bottomLeft)}>
+      </div>
+    </div>
+  );
+};
+
+ViewportOverlay.propTypes = {
+  scale: PropTypes.number.isRequired,
+  windowWidth: PropTypes.number.isRequired,
+  windowCenter: PropTypes.number.isRequired,
+  imageId: PropTypes.string.isRequired,
+  imageIndex: PropTypes.number.isRequired,
+  stackSize: PropTypes.number.isRequired,
+  activeTools: PropTypes.arrayOf(PropTypes.string)
+};
+
+ViewportOverlay.defaultProps = {
+  activeTools: []
+};
+
+export default ViewportOverlay;

modes/longitudinal/src/index.js

@@ -20,8 +20,8 @@ export default function mode({ modeConfiguration }) {
   return {
     // TODO: We're using this as a route segment
     // We should not be.
-    id: 'longitudinal-workflow',
+    id: 'viewer',
-    displayName: 'Comparison',
+    displayName: 'Basic Viewer',
     validationTags: {
       study: [],
       series: [],
@@ -95,9 +95,7 @@ export default function mode({ modeConfiguration }) {
       'org.ohif.dicom-sr',
     ],
     sopClassHandlers: [ohif.sopClassHandler, dicomsr.sopClassHandler],
-    hotkeys: [
+    hotkeys: [...hotkeys.defaults.hotkeyBindings],
-      ...hotkeys.defaults.hotkeyBindings
-    ]
   };
 }
 

modes/segmentation/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@ohif/mode-example",
+  "name": "@ohif/mode-segmentation",
   "version": "0.0.1",
-  "description": "Example mode for OHIF",
+  "description": "Segmentation mode for OHIF",
   "author": "OHIF",
   "license": "MIT",
   "repository": "OHIF/Viewers",

modes/segmentation/src/index.js

@@ -3,8 +3,10 @@ import { hotkeys } from '@ohif/core';
 
 export default function mode({ modeConfiguration }) {
   return {
-    id: 'example-mode',
+    // TODO: Mode uses 'id' for route when it should use `slug`, if provided, and
-    displayName: 'Basic Viewer',
+    // the route path
+    id: 'segmentation',
+    displayName: 'Segmentation',
     validationTags: {
       study: [],
       series: [],
@@ -15,7 +17,7 @@ export default function mode({ modeConfiguration }) {
     },
     routes: [
       {
-        path: 'viewer',
+        path: 'segmentation',
         init: ({ servicesManager, extensionManager }) => {
           const { ToolBarService } = servicesManager.services;
           ToolBarService.init(extensionManager);
@@ -51,7 +53,6 @@ export default function mode({ modeConfiguration }) {
           return {
             id: 'org.ohif.default.layoutTemplateModule.viewerLayout',
             props: {
-              // named slots
               leftPanels: ['org.ohif.default.panelModule.seriesList'],
               rightPanels: ['org.ohif.default.panelModule.measure'],
               viewports: [
@@ -69,10 +70,8 @@ export default function mode({ modeConfiguration }) {
     ],
     extensions: ['org.ohif.default', 'org.ohif.cornerstone'],
     sopClassHandlers: ['org.ohif.default.sopClassHandlerModule.stack'],
-    hotkeys: [
+    hotkeys: [...hotkeys.defaults.hotkeyBindings],
-      ...hotkeys.defaults.hotkeyBindings
-    ]
   };
 }
 
-window.exampleMode = mode({});
+window.segmentationMode = mode({});

platform/core/src/DICOMSR/dataExchange.js

@@ -43,45 +43,6 @@ const retrieveMeasurements = server => {
   return retrieveMeasurementFromSR(latestSeries, studies, serverUrl);
 };
 
-/**
- *  Function to be registered into MeasurementAPI to store measurements into DICOM Structured Reports
- *
- * @param {Object} measurementData - OHIF measurementData object
- * @param {Object} filter
- * @param {serverType} server
- * @returns {Object} With message to be displayed on success
- */
-const storeMeasurementsOld = async (measurementData, filter, server) => {
-  log.info('[DICOMSR] storeMeasurements');
-
-  if (!server || server.type !== 'dicomWeb') {
-    log.error('[DICOMSR] DicomWeb server is required!');
-    return Promise.reject({});
-  }
-
-  const serverUrl = server.wadoRoot;
-  const firstMeasurementKey = Object.keys(measurementData)[0];
-  const firstMeasurement = measurementData[firstMeasurementKey][0];
-  const StudyInstanceUID =
-    firstMeasurement && firstMeasurement.StudyInstanceUID;
-
-  try {
-    await stowSRFromMeasurements(measurementData, serverUrl);
-    if (StudyInstanceUID) {
-      studies.deleteStudyMetadataPromise(StudyInstanceUID);
-    }
-
-    return {
-      message: 'Measurements saved successfully',
-    };
-  } catch (error) {
-    log.error(
-      `[DICOMSR] Error while saving the measurements: ${error.message}`
-    );
-    throw new Error('Error while saving the measurements.');
-  }
-};
-
 /**
  *
  * @param {object[]} measurementData An array of measurements from the measurements service
@@ -118,6 +79,7 @@ const generateReport = measurementData => {
  * @param {object[]} measurementData An array of measurements from the measurements service
  * that you wish to serialize.
  * @param {object} dataSource The dataSource that you wish to use to persist the data.
+ * @return {object} The naturalized report
  */
 const storeMeasurements = async (measurementData, dataSource) => {
   // TODO -> Eventually use the measurements directly and not the dcmjs adapter,
@@ -129,24 +91,22 @@ const storeMeasurements = async (measurementData, dataSource) => {
     return Promise.reject({});
   }
 
-  const naturalizedReport = generateReport(measurementData);
-  const { StudyInstanceUID } = naturalizedReport;
-
   try {
+    const naturalizedReport = generateReport(measurementData);
+    const { StudyInstanceUID } = naturalizedReport;
+
     await dataSource.store.dicom(naturalizedReport);
 
     if (StudyInstanceUID) {
-      studies.deleteStudyMetadataPromise(StudyInstanceUID);
+      dataSource.deleteStudyMetadataPromise(StudyInstanceUID);
     }
 
-    return {
+    return naturalizedReport;
-      message: 'Measurements saved successfully',
-    };
   } catch (error) {
     log.error(
       `[DICOMSR] Error while saving the measurements: ${error.message}`
     );
-    throw new Error('Error while saving the measurements.');
+    throw new Error(error.message || 'Error while saving the measurements.');
   }
 };
 

platform/core/src/DataSources/IWebApiDataSource.js

@@ -17,6 +17,7 @@ function create({
   retrieve,
   store,
   retrieveSeriesMetadata,
+  deleteStudyMetadataPromise,
   getImageIdsForDisplaySet,
 }) {
   const defaultQuery = {
@@ -59,6 +60,7 @@ function create({
     store: store || defaultStore,
     getImageIdsForDisplaySet,
     retrieveSeriesMetadata,
+    deleteStudyMetadataPromise,
   };
 }
 

platform/core/src/services/DicomMetadataStore/DicomMetadataStore.js

@@ -72,16 +72,16 @@ const BaseImplementation = {
       study = _model.studies[_model.studies.length - 1];
     }
 
-    // TODO: Worth identifying why this is being called many times with series
+    study.addSeries(instances);
-    // that are already "added"?
-    const didAddSeries = study.addSeries(instances);
 
-    if (didAddSeries) {
+    // Broadcast an event even if we used cached data.
-      this._broadcastEvent(EVENTS.INSTANCES_ADDED, {
+    // This is because the mode needs to listen to instances that are added to build up its active displaySets.
-        StudyInstanceUID,
+    // It will see there are cached displaySets and end early if this Series has already been fired in this
-        SeriesInstanceUID,
+    // Mode session for some reason.
-      });
+    this._broadcastEvent(EVENTS.INSTANCES_ADDED, {
-    }
+      StudyInstanceUID,
+      SeriesInstanceUID,
+    });
   },
   addStudy(study) {
     const { StudyInstanceUID } = study;

platform/core/src/services/DisplaySetService/DisplaySetService.js

@@ -52,7 +52,7 @@ export default class DisplaySetService {
       displaySet => displaySet.displaySetInstanceUID === displaySetInstanceUid
     );
 
-  makeDisplaySets = (input, batch = false) => {
+  makeDisplaySets = (input, { batch = false, madeInClient = false } = {}) => {
     if (!input || !input.length) {
       throw new Error('No instances were provided.');
     }
@@ -78,11 +78,20 @@ export default class DisplaySetService {
       displaySetsAdded = displaySets;
     }
 
+    const options = {};
+
+    if (madeInClient) {
+      options.madeInClient = true;
+    }
+
     // TODO: This is tricky. How do we know we're not resetting to the same/existing DSs?
     // TODO: This is likely run anytime we touch DicomMetadataStore. How do we prevent uneccessary broadcasts?
     if (displaySetsAdded && displaySetsAdded.length) {
-      this._broadcastEvent(EVENTS.DISPLAY_SETS_ADDED, displaySetsAdded);
       this._broadcastEvent(EVENTS.DISPLAY_SETS_CHANGED, this.activeDisplaySets);
+      this._broadcastEvent(EVENTS.DISPLAY_SETS_ADDED, {
+        displaySetsAdded,
+        options,
+      });
     }
   };
 

platform/core/src/services/ToolBarService/ToolBarService.js

@@ -27,6 +27,15 @@ export default class ToolBarService {
     return this.buttons;
   }
 
+  getActiveTools() {
+    return Object.keys(this.buttons).filter(key => {
+      const button = this.buttons[key];
+      if (button && button.props && button.props.isActive) {
+        return button;
+      }
+    });
+  }
+
   setButtons(buttons) {
     this.buttons = buttons;
     this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {});

platform/core/src/services/UIViewportDialogService/index.js

@@ -26,13 +26,21 @@ const serviceImplementation = {
  *
  * @param {ViewportDialogProps} props { content, contentProps, viewportIndex }
  */
-function _show({ viewportIndex, type, message, actions, onSubmit }) {
+function _show({
+  viewportIndex,
+  type,
+  message,
+  actions,
+  onSubmit,
+  onOutsideClick,
+}) {
   return serviceImplementation._show({
     viewportIndex,
     type,
     message,
     actions,
     onSubmit,
+    onOutsideClick,
   });
 }
 

platform/ui/src/assets/icons/close.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19">
     <g fill="currentColor" fill-rule="evenodd">
         <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
             <path d="M.188.187L8.813 8.812M8.813.187L.188 8.812" transform="translate(5 5)"/>

platform/ui/src/components/IconButton/IconButton.jsx

@@ -113,7 +113,7 @@ const IconButton = ({
 };
 
 IconButton.defaultProps = {
-  onClick: () => {},
+  onClick: () => { },
   color: 'default',
   disabled: false,
   fullWidth: false,

platform/ui/src/components/Notification/Notification.jsx

@@ -1,16 +1,35 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { Button, Icon } from '@ohif/ui';
 
-const Notification = ({ type, message, actions, onSubmit }) => {
+const Notification = ({ type, message, actions, onSubmit, onOutsideClick }) => {
+  const notificationRef = useRef(null);
+
+  useEffect(() => {
+    const notificationElement = notificationRef.current;
+    const handleClick = function(event) {
+      const isClickInside = notificationElement.contains(event.target);
+
+      if (!isClickInside) {
+        onOutsideClick();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, [onOutsideClick]);
+
   const iconsByType = {
     error: {
       icon: 'info',
       color: 'text-red-700',
     },
     warning: {
-      icon: 'info',
+      icon: 'notificationwarning-diamond',
       color: 'text-yellow-500',
     },
     info: {
@@ -35,7 +54,10 @@ const Notification = ({ type, message, actions, onSubmit }) => {
   const { icon, color } = getIconData();
 
   return (
-    <div className="flex flex-col p-2 mx-2 mt-2 rounded bg-common-bright">
+    <div
+      ref={notificationRef}
+      className="flex flex-col p-2 mx-2 mt-2 rounded bg-common-bright"
+    >
       <div className="flex flex-grow">
         <Icon name={icon} className={classnames('w-5', color)} />
         <span className="ml-2 text-base text-black">{message}</span>
@@ -65,6 +87,7 @@ const Notification = ({ type, message, actions, onSubmit }) => {
 
 Notification.defaultProps = {
   type: 'info',
+  onOutsideClick: () => {},
 };
 
 Notification.propTypes = {
@@ -78,6 +101,8 @@ Notification.propTypes = {
     })
   ).isRequired,
   onSubmit: PropTypes.func.isRequired,
+  /** Can be used as a callback to dismiss the notification for clicks that occur outside of it */
+  onOutsideClick: PropTypes.func,
 };
 
 export default Notification;

platform/ui/src/components/Snackbar/Snackbar.css

@@ -0,0 +1,115 @@
+/* TODO: Create tailwind styles for this component */
+.sb-topLeft {
+  @apply top-0 left-0 bottom-auto right-auto;
+}
+
+.sb-topCenter {
+  transform: translateX(-50%);
+  @apply top-0 bottom-auto left-1/2;
+}
+
+.sb-topRight {
+  @apply right-0 top-0 left-auto bottom-auto;
+}
+
+.sb-bottomLeft {
+  @apply right-auto left-0 bottom-0 top-auto;
+}
+
+.sb-bottomCenter {
+  @apply top-auto bottom-0 left-1/2;
+  transform: translateX(-50%);
+}
+
+.sb-bottomRight {
+  margin: 10px 0 0;
+  @apply top-auto bottom-0 left-auto right-0;
+}
+
+.sb-topLeft .sb-item,
+.sb-topCenter .sb-item,
+.sb-topRight .sb-item {
+  margin: 10px 0 0;
+}
+
+.sb-bottomLeft .sb-item,
+.sb-bottomCenter .sb-item,
+.sb-bottomRight .sb-item {
+  margin: 0 0 10px;
+}
+
+.sb-closeBtn {
+  text-shadow: none;
+  width: 20px;
+  height: 20px;
+  right: 5px;
+  top: 5px;
+  @apply overflow-hidden opacity-100 rounded-full p-1 bg-white cursor-pointer absolute text-center duration-300 transition-all ease-in-out;
+}
+
+.sb-closeBtn:hover {
+  background: #fff;
+}
+
+.sb-closeIcon {
+  @apply w-full relative overflow-hidden h-full block leading-none;
+}
+
+.sb-closeIcon:after,
+.sb-closeIcon:before {
+  content: ' ';
+  height: 2px;
+  width: 12px;
+  @apply duration-300 transition-all ease-in-out block bg-black opacity-100 absolute;
+}
+
+.sb-closeIcon:before {
+  left: 4px;
+  top: 3px;
+  transform: rotate(45deg);
+  transform-origin: 0px 50%;
+}
+
+.sb-closeIcon:after {
+  right: 3px;
+  top: 5px;
+  transform: rotate(-45deg);
+  transform-origin: calc(100% - 3px) 50%;
+}
+
+.sb-title {
+  @apply break-normal text-lg font-bold;
+}
+
+.sb-message {
+  @apply break-normal text-base;
+}
+
+.sb-item {
+  animation: fadein 1s;
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
+    0 3px 5px -1px rgba(0, 0, 0, 0.14);
+  @apply relative p-5 text-white overflow-hidden rounded-md transition-height ease-in-out duration-300;
+}
+
+@keyframes fadein {
+  from {
+    top: 30px;
+    @apply opacity-0;
+  }
+  to {
+    @apply opacity-100 top-0;
+  }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+  from {
+    top: 30px;
+    @apply opacity-0;
+  }
+  to {
+    @apply opacity-100;
+    top: 0;
+  }
+}

platform/ui/src/components/Snackbar/SnackbarContainer.jsx

@@ -2,16 +2,18 @@ import React from 'react';
 import SnackbarItem from './SnackbarItem';
 import { useSnackbar } from '../../contextProviders';
 
+import './Snackbar.css';
+
 const SnackbarContainer = () => {
   const { snackbarItems, hide } = useSnackbar();
 
-  const renderItem = item => {
+  const renderItem = item => (
-    return <SnackbarItem key={item.itemId} options={item} onClose={hide} />;
+    <SnackbarItem
-  };
+      key={item.itemId}
-
+      options={item}
-  if (!snackbarItems) {
+      onClose={hide}
-    return null;
+    />
-  }
+  );
 
   const renderItems = () => {
     const items = {
@@ -23,11 +25,9 @@ const SnackbarContainer = () => {
       bottomRight: [],
     };
 
-    snackbarItems.map(item => {
+    snackbarItems.forEach(item => items[item.position].push(item));
-      items[item.position].push(item);
-    });
 
-    return (
+    return snackbarItems && (
       <div>
         {Object.keys(items).map(pos => {
           if (!items[pos].length) {
@@ -35,7 +35,7 @@ const SnackbarContainer = () => {
           }
 
           return (
-            <div key={pos} className={`sb-container sb-${pos}`}>
+            <div key={pos} className={`fixed z-50 p-6 box-border h-auto sb-${pos}`}>
               {items[pos].map((item, index) => (
                 <div key={item.id + index}>{renderItem(item)}</div>
               ))}

platform/ui/src/components/Snackbar/SnackbarItem.jsx

@@ -1,25 +1,38 @@
 import React, { useEffect } from 'react';
+import classNames from 'classnames';
+
+import SnackbarTypes from './SnackbarTypes';
 
 const SnackbarItem = ({ options, onClose }) => {
-  const handleClose = () => {
+  const handleClose = () => onClose(options.id);
-    onClose(options.id);
-  };
 
   useEffect(() => {
     if (options.autoClose) {
-      setTimeout(() => {
+      setTimeout(() => handleClose(), options.duration);
-        handleClose();
-      }, options.duration);
     }
   }, []);
 
+  const typeClasses = {
+    [SnackbarTypes.INFO]: 'bg-primary-active',
+    [SnackbarTypes.WARNING]: 'bg-yellow-600',
+    [SnackbarTypes.SUCCESS]: 'bg-green-600',
+    [SnackbarTypes.ERROR]: 'bg-red-600'
+  };
+
+  const hidden = 'duration-300 transition-all ease-in-out h-0 opacity-0 pt-0 mb-0 pb-0';
+
   return (
-    <div>
+    <div
-      <span onClick={handleClose}>
+      className={classNames(
-        <span>x</span>
+        `${options.visible ? '' : hidden} sb-item`,
+        typeClasses[options.type]
+      )}
+    >
+      <span className="sb-closeBtn" onClick={handleClose}>
+        <span className="sb-closeIcon">x</span>
       </span>
-      {options.title && <div>{options.title}</div>}
+      {options.title && <div className="sb-title">{options.title}</div>}
-      {options.message && <div>{options.message}</div>}
+      {options.message && <div className="sb-message">{options.message}</div>}
     </div>
   );
 };

platform/ui/src/components/Thumbnail/Thumbnail.jsx

@@ -10,6 +10,7 @@ import blurHandlerListener from '../../utils/blurHandlerListener';
  *
  */
 const Thumbnail = ({
+  displaySetInstanceUID,
   className,
   imageSrc,
   imageAltText,
@@ -40,6 +41,7 @@ const Thumbnail = ({
         className,
         'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none group'
       )}
+      id={`thumbnail-${displaySetInstanceUID}`}
       onDoubleClick={onClick}
       role="button"
       tabIndex="0"
@@ -79,6 +81,7 @@ const Thumbnail = ({
 };
 
 Thumbnail.propTypes = {
+  displaySetInstanceUID: PropTypes.string.isRequired,
   className: PropTypes.string,
   imageSrc: PropTypes.string,
   /**

platform/ui/src/components/ThumbnailList/ThumbnailList.jsx

@@ -34,6 +34,7 @@ const ThumbnailList = ({
               return (
                 <Thumbnail
                   key={displaySetInstanceUID}
+                  displaySetInstanceUID={displaySetInstanceUID}
                   dragData={dragData}
                   description={description}
                   seriesNumber={seriesNumber}
@@ -49,6 +50,7 @@ const ThumbnailList = ({
               return (
                 <ThumbnailTracked
                   key={displaySetInstanceUID}
+                  displaySetInstanceUID={displaySetInstanceUID}
                   dragData={dragData}
                   description={description}
                   seriesNumber={seriesNumber}
@@ -67,6 +69,7 @@ const ThumbnailList = ({
                 <ThumbnailNoImage
                   isActive={isActive}
                   key={displaySetInstanceUID}
+                  displaySetInstanceUID={displaySetInstanceUID}
                   dragData={dragData}
                   modality={modality}
                   seriesDate={seriesDate}

platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx

@@ -1,12 +1,14 @@
 import React, { useRef } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { useDrag } from 'react-dnd';
 
 import { Icon } from '@ohif/ui';
 import blurHandlerListener from '../../utils/blurHandlerListener';
 
 const ThumbnailNoImage = ({
+  displaySetInstanceUID,
   description,
   seriesDate,
   modality,
@@ -31,6 +33,7 @@ const ThumbnailNoImage = ({
         'flex flex-row flex-1 px-4 py-3 cursor-pointer outline-none border-transparent hover:border-blue-300 focus:border-blue-300 rounded',
         isActive ? 'border-2 border-primary-light' : 'border'
       )}
+      id={`thumbnail-${displaySetInstanceUID}`}
       onDoubleClick={onClick}
       role="button"
       tabIndex="0"
@@ -54,6 +57,7 @@ const ThumbnailNoImage = ({
 };
 
 ThumbnailNoImage.propTypes = {
+  displaySetInstanceUID: PropTypes.string.isRequired,
   /**
    * Data the thumbnail should expose to a receiving drop target. Use a matching
    * `dragData.type` to identify which targets can receive this draggable item.

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx

@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import { Icon, Thumbnail, Tooltip } from '@ohif/ui';
 
 const ThumbnailTracked = ({
+  displaySetInstanceUID,
   className,
   imageSrc,
   imageAltText,
@@ -26,6 +27,7 @@ const ThumbnailTracked = ({
         'flex flex-row flex-1 px-3 py-2 cursor-pointer outline-none',
         className
       )}
+      id={`thumbnail-${displaySetInstanceUID}`}
     >
       <div className="flex flex-col items-center flex-2">
         <div

platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

@@ -39,7 +39,7 @@ const ViewportActionBar = ({
     scanner,
   } = patientInformation;
 
-  const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo)
+  const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo);
 
   const renderIconStatus = () => {
     if (modality === 'SR') {
@@ -64,26 +64,26 @@ const ViewportActionBar = ({
         {!isTracked ? (
           <Icon name="dotted-circle" className="w-6 text-primary-light" />
         ) : (
-            <Tooltip
+          <Tooltip
-              position="bottom-left"
+            position="bottom-left"
-              content={
+            content={
-                <div className="flex py-2">
+              <div className="flex py-2">
-                  <div className="flex pt-1">
+                <div className="flex pt-1">
-                    <Icon name="info-link" className="w-4 text-primary-main" />
+                  <Icon name="info-link" className="w-4 text-primary-main" />
-                  </div>
+                </div>
-                  <div className="flex ml-4">
+                <div className="flex ml-4">
-                    <span className="text-base text-common-light">
+                  <span className="text-base text-common-light">
-                      Series is
+                    Series is
                     <span className="font-bold text-white"> tracked</span> and
                     can be viewed <br /> in the measurement panel
                   </span>
-                  </div>
                 </div>
-              }
+              </div>
-            >
+            }
-              <Icon name="tracked" className="w-6 text-primary-light" />
+          >
-            </Tooltip>
+            <Icon name="tracked" className="w-6 text-primary-light" />
-          )}
+          </Tooltip>
+        )}
       </div>
     );
   };
@@ -196,54 +196,64 @@ function PatientInfo({
       isSticky
       isDisabled={!isOpen}
       position="bottom-right"
-      content={isOpen && (
+      content={
-        <div className="flex py-2">
+        isOpen && (
-          <div className="flex pt-1">
+          <div className="flex py-2">
-            <Icon name="info-link" className="w-4 text-primary-main" />
+            <div className="flex pt-1">
-          </div>
+              <Icon name="info-link" className="w-4 text-primary-main" />
-          <div className="flex flex-col ml-2">
-            <span className="text-base font-bold text-white">
-              {patientName}
-            </span>
-            <div className="flex pb-4 mt-4 mb-4 border-b border-secondary-main">
-              <div className={classnames(classes.firstRow)}>
-                <span className={classnames(classes.infoHeader)}>Sex</span>
-                <span className={classnames(classes.infoText)}>
-                  {patientSex}
-                </span>
-              </div>
-              <div className={classnames(classes.row)}>
-                <span className={classnames(classes.infoHeader)}>Age</span>
-                <span className={classnames(classes.infoText)}>
-                  {patientAge}
-                </span>
-              </div>
-              <div className={classnames(classes.row)}>
-                <span className={classnames(classes.infoHeader)}>MRN</span>
-                <span className={classnames(classes.infoText)}>{MRN}</span>
-              </div>
             </div>
-            <div className="flex">
+            <div className="flex flex-col ml-2">
-              <div className={classnames(classes.firstRow)}>
+              <span className="text-base font-bold text-white">
-                <span className={classnames(classes.infoHeader)}>
+                {patientName}
-                  Thickness
+              </span>
-                </span>
+              <div className="flex pb-4 mt-4 mb-4 border-b border-secondary-main">
-                <span className={classnames(classes.infoText)}>
+                <div className={classnames(classes.firstRow)}>
-                  {thickness}
+                  <span className={classnames(classes.infoHeader)}>Sex</span>
-                </span>
+                  <span className={classnames(classes.infoText)}>
+                    {patientSex}
+                  </span>
+                </div>
+                <div className={classnames(classes.row)}>
+                  <span className={classnames(classes.infoHeader)}>Age</span>
+                  <span className={classnames(classes.infoText)}>
+                    {patientAge}
+                  </span>
+                </div>
+                <div className={classnames(classes.row)}>
+                  <span className={classnames(classes.infoHeader)}>MRN</span>
+                  <span className={classnames(classes.infoText)}>{MRN}</span>
+                </div>
               </div>
-              <div className={classnames(classes.row)}>
+              <div className="flex">
-                <span className={classnames(classes.infoHeader)}>Spacing</span>
+                <div className={classnames(classes.firstRow)}>
-                <span className={classnames(classes.infoText)}>{spacing}</span>
+                  <span className={classnames(classes.infoHeader)}>
-              </div>
+                    Thickness
-              <div className={classnames(classes.row)}>
+                  </span>
-                <span className={classnames(classes.infoHeader)}>Scanner</span>
+                  <span className={classnames(classes.infoText)}>
-                <span className={classnames(classes.infoText)}>{scanner}</span>
+                    {thickness ? thickness : 'N/A'}
+                  </span>
+                </div>
+                <div className={classnames(classes.row)}>
+                  <span className={classnames(classes.infoHeader)}>
+                    Spacing
+                  </span>
+                  <span className={classnames(classes.infoText)}>
+                    {spacing}
+                  </span>
+                </div>
+                <div className={classnames(classes.row)}>
+                  <span className={classnames(classes.infoHeader)}>
+                    Scanner
+                  </span>
+                  <span className={classnames(classes.infoText)}>
+                    {scanner}
+                  </span>
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        )
-      )}
+      }
     >
       <div className="relative flex justify-end cursor-pointer">
         <div className="relative">

platform/ui/src/contextProviders/DialogProvider.css

@@ -0,0 +1,8 @@
+/* TODO: Find a better way to set the cursor for all contents of dialog. */
+.DraggableItem.draggable div {
+  cursor: grab !important;
+}
+
+.DraggableItem.draggable.dragging div {
+  cursor: grabbing !important;
+}

platform/ui/src/contextProviders/DialogProvider.jsx

@@ -5,11 +5,14 @@ import React, {
   useCallback,
   useEffect,
 } from 'react';
+
 import PropTypes from 'prop-types';
 import Draggable from 'react-draggable';
 import classNames from 'classnames';
+
 import { utils } from '@ohif/core';
 
+import './DialogProvider.css';
 
 const DialogContext = createContext(null);
 
@@ -150,6 +153,7 @@ const DialogProvider = ({ children, service }) => {
         onStart,
         onStop,
         onDrag,
+        showOverlay,
       } = dialog;
 
       let position =
@@ -158,13 +162,13 @@ const DialogProvider = ({ children, service }) => {
         position = centerPositions.find(position => position.id === id);
       }
 
-      return (
+      const dragableItem = () => (
         <Draggable
           key={id}
           disabled={!isDraggable}
           position={position}
           defaultPosition={position}
-          bounds="parent"
+          bounds='parent'
           onStart={event => {
             const e = event || window.event;
             const target = e.target || e.srcElement;
@@ -215,6 +219,21 @@ const DialogProvider = ({ children, service }) => {
           </div>
         </Draggable>
       );
+
+      const withOverlay = component => {
+        const background = 'bg-black bg-opacity-50';
+        const overlay = 'fixed z-50 left-0 top-0 w-full h-full overflow-auto';
+        return (
+          <div
+            className={classNames(overlay, background)}
+            key={id}
+          >
+            {component}
+          </div>
+        );
+      };
+
+      return showOverlay ? withOverlay(dragableItem()) : dragableItem();
     });
 
   /**
@@ -236,13 +255,11 @@ const DialogProvider = ({ children, service }) => {
 
   return (
     <DialogContext.Provider value={{ create, dismiss, dismissAll, isEmpty }}>
-      <div className="DraggableArea">
+      {!isEmpty() &&
-        {dialogs.some(dialog => dialog.showOverlay) ? (
+        <div className='w-full h-full absolute'>
-          <div className="Overlay active">{renderDialogs()}</div>
+          {renderDialogs()}
-        ) : (
+        </div>
-          renderDialogs()
+      }
-        )}
-      </div>
       {children}
     </DialogContext.Provider>
   );

platform/ui/src/contextProviders/ViewportDialogProvider.jsx

@@ -18,6 +18,9 @@ const DEFAULT_STATE = {
   onSubmit: () => {
     console.log('btn value?');
   },
+  onOutsideClick: () => {
+    console.warn('default: onOutsideClick')
+  },
   onDismiss: () => {
     console.log('dismiss? -1');
   },

platform/ui/tailwind.config.js

@@ -328,6 +328,9 @@ module.exports = {
       '0': '0',
       auto: 'auto',
       full: '100%',
+      viewport: '0.5rem',
+      '1/2': '50%',
+      'viewport-scrollbar': '1.3rem'
     },
     letterSpacing: {
       tighter: '-0.05em',
@@ -681,6 +684,7 @@ module.exports = {
     transitionProperty: {
       none: 'none',
       all: 'all',
+      'height': 'height',
       default:
         'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
       colors: 'background-color, border-color, color, fill, stroke',

platform/viewer/src/App.jsx

@@ -20,8 +20,8 @@ import createRoutes from './routes';
 import appInit from './appInit.js';
 
 // TODO: Temporarily for testing
-import '@ohif/mode-example';
 import '@ohif/mode-longitudinal';
+import '@ohif/mode-segmentation';
 
 /**
  * ENV Variable to determine routing behavior
@@ -50,7 +50,7 @@ function App({ config, defaultExtensions }) {
     dataSources,
     extensionManager,
     servicesManager,
-    hotkeysManager
+    hotkeysManager,
   });
   const {
     UIDialogService,

platform/viewer/src/appInit.js

@@ -71,8 +71,8 @@ function appInit(appConfigOrFunc, defaultExtensions) {
 
   // TODO: Remove this
   if (!appConfig.modes.length) {
-    appConfig.modes.push(window.exampleMode);
     appConfig.modes.push(window.longitudinalMode);
+    appConfig.modes.push(window.segmentationMode);
   }
 
   return {
@@ -80,7 +80,7 @@ function appInit(appConfigOrFunc, defaultExtensions) {
     commandsManager,
     extensionManager,
     servicesManager,
-    hotkeysManager
+    hotkeysManager,
   };
 }