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

2020-06-30 17:59:57 -03:00 · 2020-06-30 17:59:57 -03:00 · 4b8dcef956
commit 4b8dcef956
parent 0f78ae3b57 77bdd6c807
48 changed files with 1156 additions and 363 deletions
--- a/extensions/default/src/ActionButtons.jsx
+++ b/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;
--- a/extensions/default/src/DicomWebDataSource/index.js
+++ b/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 = [];
--- a/extensions/default/src/PanelMeasurementTable.js
+++ b/extensions/default/src/PanelMeasurementTable.js
@ -1,55 +1,170 @@
-import React from 'react';
-import { StudySummary, MeasurementTable } from '@ohif/ui';
-import ActionButtons from './ActionButtons.jsx';
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+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 = {
-    date: '07-Sep-2010',
-    modality: 'CT',
-    description: 'CHEST/ABD/PELVIS W CONTRAST',
-  };
+    // ~~ Subscription
+    const added = MeasurementService.EVENTS.MEASUREMENT_ADDED;
+    const updated = MeasurementService.EVENTS.MEASUREMENT_UPDATED;
+    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 = {
-    title: 'Measurements',
-    amount: 10,
-    data: new Array(10).fill({}).map((el, i) => ({
-      id: i + 1,
-      label: 'Label short description',
-      displayText: '24.0 x 24.0 mm (S:4, I:22)',
-      isActive: activeMeasurementItem === i + 1,
-    })),
-    onClick: id => setActiveMeasurementItem(s => (s === id ? null : id)),
-    onEdit: id => alert(`Edit: ${id}`),
-  };
+    return () => {
+      subscriptions.forEach(unsub => {
+        unsub();
+      });
+    };
+  }, [MeasurementService]);
+
+  // const activeMeasurementItem = 0;

  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}
-          data={measurementTableData.data}
+          amount={displayMeasurements.length}
+          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);
+}
--- a/extensions/default/src/Panels/PanelStudyBrowser.jsx
+++ b/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 => {
-        newDisplaySets.forEach(async dSet => {
+      data => {
+        const { displaySetsAdded } = data;
+        displaySetsAdded.forEach(async dSet => {
          const newImageSrcEntry = {};
          const displaySet = DisplaySetService.getDisplaySetByUID(
            dSet.displaySetInstanceUID
--- a/extensions/default/src/debounce.js
+++ b/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;
--- a/extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js
+++ b/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`,
-            spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
+            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
+            spacing:
+              PixelSpacing && PixelSpacing.length
+                ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
+                    2
+                  )}mm`
+                : '',
            scanner: ManufacturerModelName || '',
          },
        }}
--- a/extensions/dicom-sr/src/getSopClassHandlerModule.js
+++ b/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,
--- a/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/TrackedMeasurementsContext.jsx
+++ b/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?'),
-    promptTrackNewStudy: promptUser.bind(null, 'New study?'),
-    promptTrackNewSeries: promptUser.bind(null, 'New series?'),
+    promptBeginTracking: promptBeginTracking.bind(
+      null,
+      UIViewportDialogService
+    ),
+    promptTrackNewSeries: promptTrackNewSeries.bind(
+      null,
+      UIViewportDialogService
+    ),
+    promptTrackNewStudy: promptTrackNewStudy.bind(
+      null,
+      UIViewportDialogService
+    ),
  });


--- a/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/measurementTrackingMachine.js
+++ b/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'],
-            cond: 'promptAccepted',
+            actions: ['addTrackedSeries'],
+            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'],
-            cond: 'promptAccepted',
+            actions: ['setTrackedStudyAndSeries'],
+            cond: 'shouldSetStudyAndSeries',
          },
          {
            target: 'tracking',
@ -135,9 +149,12 @@ const defaultOptions = {
    })),
  },
  guards: {
-    promptAccepted: (ctx, evt) => evt.data && evt.data.userResponse === 1,
-    promptCanceled: (ctx, evt) => evt.data && evt.data.userResponse === 0,
-    promptDeclined: (ctx, evt) => evt.data && evt.data.userResponse === -1,
+    shouldKillMachine: (ctx, evt) =>
+      evt.data && evt.data.userResponse === RESPONSE.NO_NEVER,
+    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 };
--- a/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptBeginTracking.js
+++ b/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;
--- a/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewSeries.js
+++ b/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;
--- a/extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewStudy.js
+++ b/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;
--- a/extensions/measurement-tracking/src/getViewportModule.js
+++ b/extensions/measurement-tracking/src/getViewportModule.js
@ -12,8 +12,19 @@ const OHIFCornerstoneViewport = props => {
  );
 };

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

 export default getViewportModule;
--- a/extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js
+++ b/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 measurements = MeasurementService.getMeasurements();
-    const trackedMeasurements = measurements.filter(
-      m =>
-        trackedStudy === m.referenceStudyUID &&
-        trackedSeries.includes(m.referenceSeriesUID)
-    );
+  const createReport = async () => {
+    const loadingDialogId = UIDialogService.create({
+      showOverlay: true,
+      isDraggable: false,
+      centralize: true,
+      // 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();
-    // TODO -> Eventually deal with multiple dataSources.
-    // Would need some way of saying which one is the "push" dataSource
-    const dataSource = dataSources[0];
+      const dataSources = extensionManager.getDataSources();
+      // TODO -> Eventually deal with multiple dataSources.
+      // Would need some way of saying which one is the "push" dataSource
+      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}
-          onCreateReportClick={onCreateReportClick}
+          onExportClick={exportReport}
+          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})`];
+    }
  }
 }

--- a/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx
+++ b/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 => {
-        newDisplaySets.forEach(async dSet => {
+      data => {
+        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,
+          };
+        }
+      }
+    }
+  }
+}
--- a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
+++ b/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`,
-            spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
+            thickness: SliceThickness ? `${SliceThickness.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>
--- a/extensions/measurement-tracking/src/viewports/ViewportOverlay.js
+++ b/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;
--- a/modes/longitudinal/src/index.js
+++ b/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',
-    displayName: 'Comparison',
+    id: 'viewer',
+    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.defaults.hotkeyBindings
-    ]
+    hotkeys: [...hotkeys.defaults.hotkeyBindings],
  };
 }

--- a/modes/segmentation/.webpack/webpack.dev.js
+++ b/modes/segmentation/.webpack/webpack.dev.js
--- a/modes/segmentation/.webpack/webpack.prod.js
+++ b/modes/segmentation/.webpack/webpack.prod.js
--- a/modes/segmentation/LICENSE
+++ b/modes/segmentation/LICENSE
--- a/modes/segmentation/babel.config.js
+++ b/modes/segmentation/babel.config.js
--- a/modes/segmentation/package.json
+++ b/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",
--- a/modes/segmentation/src/index.js
+++ b/modes/segmentation/src/index.js
@ -3,8 +3,10 @@ import { hotkeys } from '@ohif/core';

 export default function mode({ modeConfiguration }) {
  return {
-    id: 'example-mode',
-    displayName: 'Basic Viewer',
+    // TODO: Mode uses 'id' for route when it should use `slug`, if provided, and
+    // 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.defaults.hotkeyBindings
-    ]
+    hotkeys: [...hotkeys.defaults.hotkeyBindings],
  };
 }

-window.exampleMode = mode({});
+window.segmentationMode = mode({});
--- a/modes/segmentation/src/toolbarButtons.js
+++ b/modes/segmentation/src/toolbarButtons.js
--- a/platform/core/src/DICOMSR/dataExchange.js
+++ b/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 {
-      message: 'Measurements saved successfully',
-    };
+    return naturalizedReport;
  } 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.');
  }
 };

--- a/platform/core/src/DataSources/IWebApiDataSource.js
+++ b/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,
  };
 }

--- a/platform/core/src/services/DicomMetadataStore/DicomMetadataStore.js
+++ b/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
-    // that are already "added"?
-    const didAddSeries = study.addSeries(instances);
+    study.addSeries(instances);

-    if (didAddSeries) {
-      this._broadcastEvent(EVENTS.INSTANCES_ADDED, {
-        StudyInstanceUID,
-        SeriesInstanceUID,
-      });
-    }
+    // Broadcast an event even if we used cached data.
+    // This is because the mode needs to listen to instances that are added to build up its active displaySets.
+    // It will see there are cached displaySets and end early if this Series has already been fired in this
+    // Mode session for some reason.
+    this._broadcastEvent(EVENTS.INSTANCES_ADDED, {
+      StudyInstanceUID,
+      SeriesInstanceUID,
+    });
  },
  addStudy(study) {
    const { StudyInstanceUID } = study;
--- a/platform/core/src/services/DisplaySetService/DisplaySetService.js
+++ b/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,
+      });
    }
  };

--- a/platform/core/src/services/ToolBarService/ToolBarService.js
+++ b/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, {});
--- a/platform/core/src/services/UIViewportDialogService/index.js
+++ b/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,
  });
 }

--- a/platform/ui/src/assets/icons/close.svg
+++ b/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)"/>
--- a/platform/ui/src/components/IconButton/IconButton.jsx
+++ b/platform/ui/src/components/IconButton/IconButton.jsx
@ -113,7 +113,7 @@ const IconButton = ({
 };

 IconButton.defaultProps = {
-  onClick: () => {},
+  onClick: () => { },
  color: 'default',
  disabled: false,
  fullWidth: false,
--- a/platform/ui/src/components/Notification/Notification.jsx
+++ b/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;
--- a/platform/ui/src/components/Snackbar/Snackbar.css
+++ b/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;
+  }
+}
--- a/platform/ui/src/components/Snackbar/SnackbarContainer.jsx
+++ b/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 => {
-    return <SnackbarItem key={item.itemId} options={item} onClose={hide} />;
-  };
-
-  if (!snackbarItems) {
-    return null;
-  }
+  const renderItem = item => (
+    <SnackbarItem
+      key={item.itemId}
+      options={item}
+      onClose={hide}
+    />
+  );

  const renderItems = () => {
    const items = {
@ -23,11 +25,9 @@ const SnackbarContainer = () => {
      bottomRight: [],
    };

-    snackbarItems.map(item => {
-      items[item.position].push(item);
-    });
+    snackbarItems.forEach(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>
              ))}
--- a/platform/ui/src/components/Snackbar/SnackbarItem.jsx
+++ b/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 = () => {
-    onClose(options.id);
-  };
+  const handleClose = () => onClose(options.id);

  useEffect(() => {
    if (options.autoClose) {
-      setTimeout(() => {
-        handleClose();
-      }, options.duration);
+      setTimeout(() => 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>
-      <span onClick={handleClose}>
-        <span>x</span>
+    <div
+      className={classNames(
+        `${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.message && <div>{options.message}</div>}
+      {options.title && <div className="sb-title">{options.title}</div>}
+      {options.message && <div className="sb-message">{options.message}</div>}
    </div>
  );
 };
--- a/platform/ui/src/components/Thumbnail/Thumbnail.jsx
+++ b/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,
  /**
--- a/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx
+++ b/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}
--- a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
+++ b/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.
--- a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx
+++ b/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
--- a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
+++ b/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
-              position="bottom-left"
-              content={
-                <div className="flex py-2">
-                  <div className="flex pt-1">
-                    <Icon name="info-link" className="w-4 text-primary-main" />
-                  </div>
-                  <div className="flex ml-4">
-                    <span className="text-base text-common-light">
-                      Series is
+          <Tooltip
+            position="bottom-left"
+            content={
+              <div className="flex py-2">
+                <div className="flex pt-1">
+                  <Icon name="info-link" className="w-4 text-primary-main" />
+                </div>
+                <div className="flex ml-4">
+                  <span className="text-base text-common-light">
+                    Series is
                    <span className="font-bold text-white"> tracked</span> and
                    can be viewed <br /> in the measurement panel
                  </span>
-                  </div>
                </div>
-              }
-            >
-              <Icon name="tracked" className="w-6 text-primary-light" />
-            </Tooltip>
-          )}
+              </div>
+            }
+          >
+            <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 && (
-        <div className="flex py-2">
-          <div className="flex pt-1">
-            <Icon name="info-link" className="w-4 text-primary-main" />
-          </div>
-          <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>
+      content={
+        isOpen && (
+          <div className="flex py-2">
+            <div className="flex pt-1">
+              <Icon name="info-link" className="w-4 text-primary-main" />
            </div>
-            <div className="flex">
-              <div className={classnames(classes.firstRow)}>
-                <span className={classnames(classes.infoHeader)}>
-                  Thickness
-                </span>
-                <span className={classnames(classes.infoText)}>
-                  {thickness}
-                </span>
+            <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={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 className="flex">
+                <div className={classnames(classes.firstRow)}>
+                  <span className={classnames(classes.infoHeader)}>
+                    Thickness
+                  </span>
+                  <span className={classnames(classes.infoText)}>
+                    {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">
--- a/platform/ui/src/contextProviders/DialogProvider.css
+++ b/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;
+}
--- a/platform/ui/src/contextProviders/DialogProvider.jsx
+++ b/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">
-        {dialogs.some(dialog => dialog.showOverlay) ? (
-          <div className="Overlay active">{renderDialogs()}</div>
-        ) : (
-          renderDialogs()
-        )}
-      </div>
+      {!isEmpty() &&
+        <div className='w-full h-full absolute'>
+          {renderDialogs()}
+        </div>
+      }
      {children}
    </DialogContext.Provider>
  );
--- a/platform/ui/src/contextProviders/ViewportDialogProvider.jsx
+++ b/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');
  },
--- a/platform/ui/tailwind.config.js
+++ b/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',
--- a/platform/viewer/src/App.jsx
+++ b/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,
--- a/platform/viewer/src/appInit.js
+++ b/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,
  };
 }