Pull in main

extensions/measurement-tracking/src/_shared/createReportAsync.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { DICOMSR } from '@ohif/core';
+
+async function createReportAsync(servicesManager, dataSource, measurements) {
+  const {
+    UINotificationService,
+    UIDialogService,
+    DisplaySetService,
+  } = servicesManager.services;
+  const loadingDialogId = UIDialogService.create({
+    showOverlay: true,
+    isDraggable: false,
+    centralize: true,
+    // TODO: Create a loading indicator component + zeplin design?
+    content: Loading,
+  });
+
+  try {
+    const naturalizedReport = await DICOMSR.storeMeasurements(
+      measurements,
+      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 });
+  }
+}
+
+function Loading() {
+  return <div className="text-primary-active">Loading...</div>;
+}
+
+export default createReportAsync;

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

@@ -19,25 +19,33 @@ const useTrackedMeasurements = () => useContext(TrackedMeasurementsContext);
  * @param {*} param0
  */
 function TrackedMeasurementsContextProvider(
-  UIViewportDialogService,
-  { children }
+  { servicesManager, extensionManager }, // Bound by consumer
+  { children } // Component props
 ) {
   const machineOptions = Object.assign({}, defaultOptions);
   machineOptions.services = Object.assign({}, machineOptions.services, {
-    promptBeginTracking: promptBeginTracking.bind(
-      null,
-      UIViewportDialogService
-    ),
-    promptTrackNewSeries: promptTrackNewSeries.bind(
-      null,
-      UIViewportDialogService
-    ),
-    promptTrackNewStudy: promptTrackNewStudy.bind(
-      null,
-      UIViewportDialogService
-    ),
+    promptBeginTracking: promptBeginTracking.bind(null, {
+      servicesManager,
+      extensionManager,
+    }),
+    promptTrackNewSeries: promptTrackNewSeries.bind(null, {
+      servicesManager,
+      extensionManager,
+    }),
+    promptTrackNewStudy: promptTrackNewStudy.bind(null, {
+      servicesManager,
+      extensionManager,
+    }),
   });
 
+  // TODO: IMPROVE
+  // - Add measurement_updated to cornerstone; debounced? (ext side, or consumption?)
+  // - Friendlier transition/api in front of measurementTracking machine?
+  // - Blocked: viewport overlay shouldn't clip when resized
+  // TODO: PRIORITY
+  // - Fix "ellipses" series description dynamic truncate length
+  // - Fix viewport border resize
+  // - created/destroyed hooks for extensions (cornerstone measurement subscriptions in it's `init`)
 
   const measurementTrackingMachine = Machine(
     machineConfiguration,
@@ -61,6 +69,8 @@ function TrackedMeasurementsContextProvider(
 
 TrackedMeasurementsContextProvider.propTypes = {
   children: PropTypes.oneOf([PropTypes.func, PropTypes.node]),
+  servicesManager: PropTypes.object.isRequired,
+  extensionManager: PropTypes.object.isRequired,
 };
 
 export {

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

@@ -76,6 +76,12 @@ const machineConfiguration = {
             target: 'idle',
           },
         ],
+        SET_TRACKED_SERIES: [
+          {
+            target: 'tracking',
+            actions: ['setTrackedStudyAndMultipleSeries'],
+          },
+        ],
       },
     },
     promptTrackNewSeries: {

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

@@ -6,7 +6,8 @@ const RESPONSE = {
   SET_STUDY_AND_SERIES: 3,
 };
 
-function promptUser(UIViewportDialogService, ctx, evt) {
+function promptUser({ servicesManager }, ctx, evt) {
+  const { UIViewportDialogService } = servicesManager.services;
   const { viewportIndex, StudyInstanceUID, SeriesInstanceUID } = evt;
 
   return new Promise(async function(resolve, reject) {

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

@@ -1,3 +1,5 @@
+import createReportAsync from './../../_shared/createReportAsync.js';
+
 const RESPONSE = {
   NO_NEVER: -1,
   CANCEL: 0,
@@ -6,8 +8,13 @@ const RESPONSE = {
   SET_STUDY_AND_SERIES: 3,
 };
 
-function promptUser(UIViewportDialogService, ctx, evt) {
+function promptUser({ servicesManager, extensionManager }, ctx, evt) {
+  const {
+    UIViewportDialogService,
+    MeasurementService,
+  } = servicesManager.services;
   const { viewportIndex, StudyInstanceUID, SeriesInstanceUID } = evt;
+  const { trackedStudy, trackedSeries } = ctx;
 
   return new Promise(async function(resolve, reject) {
     let promptResult = await _askShouldAddMeasurements(
@@ -22,9 +29,19 @@ function promptUser(UIViewportDialogService, ctx, evt) {
       );
     }
 
-    // TODO: Hook into @JamesAPetts createReport
     if (promptResult === RESPONSE.CREATE_REPORT) {
-      window.alert('CREATE REPORT');
+      // TODO -> Eventually deal with multiple dataSources.
+      // Would need some way of saying which one is the "push" dataSource
+      const dataSources = extensionManager.getDataSources();
+      const dataSource = dataSources[0];
+      const measurements = MeasurementService.getMeasurements();
+      const trackedMeasurements = measurements.filter(
+        m =>
+          trackedStudy === m.referenceStudyUID &&
+          trackedSeries.includes(m.referenceSeriesUID)
+      );
+
+      createReportAsync(servicesManager, dataSource, trackedMeasurements);
     }
 
     resolve({

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

@@ -1,3 +1,5 @@
+import createReportAsync from './../../_shared/createReportAsync.js';
+
 const RESPONSE = {
   NO_NEVER: -1,
   CANCEL: 0,
@@ -6,8 +8,13 @@ const RESPONSE = {
   SET_STUDY_AND_SERIES: 3,
 };
 
-function promptUser(UIViewportDialogService, ctx, evt) {
+function promptUser({ servicesManager, extensionManager }, ctx, evt) {
+  const {
+    UIViewportDialogService,
+    MeasurementService,
+  } = servicesManager.services;
   const { viewportIndex, StudyInstanceUID, SeriesInstanceUID } = evt;
+  const { trackedStudy, trackedSeries } = ctx;
 
   return new Promise(async function(resolve, reject) {
     let promptResult = await _askTrackMeasurements(
@@ -22,9 +29,19 @@ function promptUser(UIViewportDialogService, ctx, evt) {
       );
     }
 
-    // TODO: Hook into @JamesAPetts createReport
     if (promptResult === RESPONSE.CREATE_REPORT) {
-      window.alert('CREATE REPORT');
+      // TODO -> Eventually deal with multiple dataSources.
+      // Would need some way of saying which one is the "push" dataSource
+      const dataSources = extensionManager.getDataSources();
+      const dataSource = dataSources[0];
+      const measurements = MeasurementService.getMeasurements();
+      const trackedMeasurements = measurements.filter(
+        m =>
+          trackedStudy === m.referenceStudyUID &&
+          trackedSeries.includes(m.referenceSeriesUID)
+      );
+
+      createReportAsync(servicesManager, dataSource, trackedMeasurements);
     }
 
     resolve({

extensions/measurement-tracking/src/getContextModule.js

@@ -4,11 +4,10 @@ import {
   useTrackedMeasurements,
 } from './contexts';
 
-function getContextModule({ servicesManager }) {
-  const { UIViewportDialogService } = servicesManager.services;
+function getContextModule({ servicesManager, extensionManager }) {
   const BoundTrackedMeasurementsContextProvider = TrackedMeasurementsContextProvider.bind(
     null,
-    UIViewportDialogService
+    { servicesManager, extensionManager }
   );
 
   return [

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

@@ -5,9 +5,7 @@ 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';
+import createReportAsync from './../../_shared/createReportAsync.js';
 
 const DISPLAY_STUDY_SUMMARY_INITIAL_VALUE = {
   key: undefined, //
@@ -24,7 +22,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     measurementChangeTimestamp,
     200
   );
-  const { MeasurementService, DisplaySetService } = servicesManager.services;
+  const { MeasurementService } = servicesManager.services;
   const [
     trackedMeasurements,
     sendTrackedMeasurementsEvent,
@@ -34,9 +32,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(
@@ -103,9 +99,24 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     };
   }, [MeasurementService, sendTrackedMeasurementsEvent]);
 
-  const activeMeasurementItem = 0;
+  function createReport() {
+    // TODO -> Eventually deal with multiple dataSources.
+    // Would need some way of saying which one is the "push" dataSource
+    const dataSources = extensionManager.getDataSources();
+    const dataSource = dataSources[0];
+    const measurements = MeasurementService.getMeasurements();
+    const trackedMeasurements = measurements.filter(
+      m =>
+        trackedStudy === m.referenceStudyUID &&
+        trackedSeries.includes(m.referenceSeriesUID)
+    );
 
-  const exportReport = () => {
+    return createReportAsync(servicesManager, dataSource, trackedMeasurements);
+  }
+
+  function exportReport() {
+    const dataSources = extensionManager.getDataSources();
+    const dataSource = dataSources[0];
     const measurements = MeasurementService.getMeasurements();
     const trackedMeasurements = measurements.filter(
       m =>
@@ -115,31 +126,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
 
     // TODO -> local download.
     DICOMSR.downloadReport(trackedMeasurements, dataSource);
-  };
-
-  const createReport = async () => {
-    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];
-
-    DICOMSR.storeMeasurements(
-      trackedMeasurements,
-      dataSource,
-      naturalizedReport => {
-        DisplaySetService.makeDisplaySets([naturalizedReport], {
-          madeInClient: true,
-        });
-      }
-    );
-  };
+  }
 
   return (
     <>
@@ -169,7 +156,16 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
   );
 }
 
-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) {
@@ -189,9 +185,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',
@@ -220,15 +213,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) &&
@@ -239,18 +224,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);
 
@@ -258,16 +241,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

@@ -22,20 +22,33 @@ function PanelStudyBrowserTracking({
   // doesn't have to have such an intense shape. This works well enough for now.
   // Tabs --> Studies --> DisplaySets --> Thumbnails
   const [{ StudyInstanceUIDs }, dispatchImageViewer] = useImageViewer();
-  const [{ activeViewportIndex, viewports }] = useViewportGrid();
+  const [
+    { activeViewportIndex, viewports },
+    viewportGridService,
+  ] = useViewportGrid();
   const [
     trackedMeasurements,
     sendTrackedMeasurementsEvent,
   ] = useTrackedMeasurements();
   const [activeTabName, setActiveTabName] = useState('primary');
-  const [expandedStudyInstanceUIDs, setExpandedStudyInstanceUIDs] = useState(
-    []
-  );
+  const [expandedStudyInstanceUIDs, setExpandedStudyInstanceUIDs] = useState([
+    ...StudyInstanceUIDs,
+  ]);
   const [studyDisplayList, setStudyDisplayList] = useState([]);
   const [displaySets, setDisplaySets] = useState([]);
   const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
   const [jumpToDisplaySet, setJumpToDisplaySet] = useState(null);
 
+  const onDoubleClickThumbnailHandler = displaySetInstanceUID => {
+    viewportGridService.setDisplaysetForViewport({
+      viewportIndex: activeViewportIndex,
+      displaySetInstanceUID,
+    });
+  };
+
+  const activeDisplaySetInstanceUID =
+    viewports[activeViewportIndex]?.displaySetInstanceUID;
+
   // TODO: Should this be somewhere else? Feels more like a mode "lifecycle" setup/destroy?
   useEffect(() => {
     const { unsubscribe } = MeasurementService.subscribe(
@@ -287,11 +300,18 @@ function PanelStudyBrowserTracking({
           SeriesInstanceUID: displaySet.SeriesInstanceUID,
         });
       }}
+      onClickThumbnail={() => {}}
+      onDoubleClickThumbnail={onDoubleClickThumbnailHandler}
+      activeDisplaySetInstanceUID={activeDisplaySetInstanceUID}
     />
   );
 }
 
 PanelStudyBrowserTracking.propTypes = {
+  MeasurementService: PropTypes.shape({
+    subscribe: PropTypes.func.isRequired,
+    EVENTS: PropTypes.object.isRequired,
+  }).isRequired,
   DisplaySetService: PropTypes.shape({
     EVENTS: PropTypes.object.isRequired,
     activeDisplaySets: PropTypes.arrayOf(PropTypes.object).isRequired,