OHIFCornerstoneComponent from class component to function component

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

@@ -32,12 +32,7 @@ function PanelStudyBrowserTracking({
   const [displaySets, setDisplaySets] = useState([]);
   const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
 
-  // Listen for measurement service "adds" (really shouldn't be added until cornerstone-tools "complete")
+  // TODO: Listen for measurement service "adds" (really shouldn't be added until cornerstone-tools "complete")
-  // const {
-  //   MEASUREMENT_ADDED,
-  //   MEASUREMENT_UPDATED,
-  // } = measurementService.EVENTS;
-
   useEffect(() => {
     const { unsubscribe } = MeasurementService.subscribe(
       MeasurementService.EVENTS.MEASUREMENT_ADDED,
@@ -58,11 +53,7 @@ function PanelStudyBrowserTracking({
     );
 
     return unsubscribe;
-  }, []);
+  }, [MeasurementService, sendTrackedMeasurementsEvent]);
-
-  // TODO: REPLACE ME
-  useEffect(() => {
-  }, [sendTrackedMeasurementsEvent]);
 
   const { trackedStudy, trackedSeries } = trackedMeasurements.context;
 

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import cornerstone from 'cornerstone-core';
 import CornerstoneViewport from 'react-cornerstone-viewport';
@@ -7,6 +7,11 @@ import { ViewportActionBar } from '@ohif/ui';
 import debounce from 'lodash.debounce';
 import throttle from 'lodash.throttle';
 
+// const [
+//   trackedMeasurements,
+//   sendTrackedMeasurementsEvent,
+// ] = useTrackedMeasurements();
+
 
 // const cine = viewportSpecificData.cine;
 
@@ -15,78 +20,22 @@ import throttle from 'lodash.throttle';
 
 const { StackManager } = OHIF.utils;
 
-class OHIFCornerstoneViewport extends Component {
+function OHIFCornerstoneViewport({
-  state = {
+  children,
-    viewportData: null,
+  dataSource,
-  };
+  displaySet,
-
+  viewportIndex,
-  static defaultProps = {
+}) {
-    customProps: {},
+  const [viewportData, setViewportData] = useState(null);
-  };
-
-  static propTypes = {
-    displaySet: PropTypes.object,
-    viewportIndex: PropTypes.number,
-    dataSource: PropTypes.object,
-    children: PropTypes.node,
-    customProps: PropTypes.object,
-  };
-
-  static name = 'OHIFCornerstoneViewport';
-
-  static init() {
-    console.log('OHIFCornerstoneViewport init()');
-  }
-
   // TODO: Still needed? Better way than import `OHIF` and destructure?
   // Why is this managed by `core`?
-  static destroy() {
+  useEffect(() => {
-    console.log('OHIFCornerstoneViewport destroy()');
+    return () => {
       StackManager.clearStacks();
-  }
-
-  /**
-   * Obtain the CornerstoneTools Stack for the specified display set.
-   *
-   * @param {Object} displaySet
-   * @param {Object} dataSource
-   * @return {Object} CornerstoneTools Stack
-   */
-  static getCornerstoneStack(displaySet, dataSource) {
-    const { frameIndex } = displaySet;
-
-    // Get stack from Stack Manager
-    const storedStack = StackManager.findOrCreateStack(displaySet, dataSource);
-
-    // Clone the stack here so we don't mutate it
-    const stack = Object.assign({}, storedStack);
-
-    stack.currentImageIdIndex = frameIndex;
-
-    return stack;
-  }
-
-  getViewportData = async displaySet => {
-    let viewportData;
-
-    const { dataSource } = this.props;
-
-    const stack = OHIFCornerstoneViewport.getCornerstoneStack(
-      displaySet,
-      dataSource
-    );
-
-    viewportData = {
-      StudyInstanceUID: displaySet.StudyInstanceUID,
-      displaySetInstanceUID: displaySet.displaySetInstanceUID,
-      stack,
     };
+  }, []);
 
-    return viewportData;
+  useEffect(() => {
-  };
-
-  setStateFromProps() {
-    const { displaySet } = this.props;
     const {
       StudyInstanceUID,
       displaySetInstanceUID,
@@ -103,53 +52,38 @@ class OHIFCornerstoneViewport extends Component {
       );
     }
 
-    this.getViewportData(displaySet).then(viewportData => {
+    _getViewportData(dataSource, displaySet).then(viewportData => {
-      this.setState({
+      setViewportData({ ...viewportData });
-        viewportData,
     });
-    });
+  }, [
-  }
+    displaySet,
+    displaySet.StudyInstanceUID,
+    displaySet.displaySetInstanceUID,
+    displaySet.frameIndex,
+  ]);
 
-  componentDidMount() {
+  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-    this.setStateFromProps();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { displaySet } = this.props;
-    const prevDisplaySet = prevProps.displaySet;
-
-    if (
-      displaySet.displaySetInstanceUID !==
-        prevDisplaySet.displaySetInstanceUID ||
-      displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
-      displaySet.frameIndex !== prevDisplaySet.frameIndex
-    ) {
-      this.setStateFromProps();
-    }
-  }
-
-  render() {
   let childrenWithProps = null;
 
-    if (!this.state.viewportData) {
+  if (!viewportData) {
     return null;
   }
-    const { viewportIndex } = this.props;
+
   const {
     imageIds,
     currentImageIdIndex,
     // If this comes from the instance, would be a better default
     // `FrameTime` in the instance
     // frameRate = 0,
-    } = this.state.viewportData.stack;
+  } = viewportData.stack;
 
   // TODO: Does it make more sense to use Context?
-    if (this.props.children && this.props.children.length) {
+  if (children && children.length) {
-      childrenWithProps = this.props.children.map((child, index) => {
+    childrenWithProps = children.map((child, index) => {
       return (
         child &&
         React.cloneElement(child, {
-            viewportIndex: this.props.viewportIndex,
+          viewportIndex,
           key: index,
         })
       );
@@ -165,12 +99,18 @@ class OHIFCornerstoneViewport extends Component {
   // );
   // TODO: This display contains the meta for all instances.
   // That can't be right...
-    console.log('DISPLAYSET', this.props.displaySet)
+  console.log('DISPLAYSET', displaySet)
-    const seriesMeta = DicomMetadataStore.getSeries(this.props.displaySet.StudyInstanceUID, '');
+  // const seriesMeta = DicomMetadataStore.getSeries(this.props.displaySet.StudyInstanceUID, '');
-    console.log(seriesMeta);
+  // console.log(seriesMeta);
 
-    const { Modality, SeriesDate, SeriesDescription, SeriesNumber } = this.props.displaySet;
+  const { Modality, SeriesDate, SeriesDescription, SeriesNumber } = displaySet;
-    const { PatientID, PatientName, PatientSex, PatientAge, SliceThickness,  } = this.props.displaySet.images[0];
+  const {
+    PatientID,
+    PatientName,
+    PatientSex,
+    PatientAge,
+    SliceThickness,
+  } = displaySet.images[0];
 
   return (
     <>
@@ -209,6 +149,52 @@ class OHIFCornerstoneViewport extends Component {
     </>
   );
 }
+
+OHIFCornerstoneViewport.propTypes = {
+  displaySet: PropTypes.object.isRequired,
+  viewportIndex: PropTypes.number.isRequired,
+  dataSource: PropTypes.object,
+  children: PropTypes.node,
+  customProps: PropTypes.object,
+};
+
+OHIFCornerstoneViewport.defaultProps = {
+  customProps: {},
+};
+
+/**
+ * Obtain the CornerstoneTools Stack for the specified display set.
+ *
+ * @param {Object} displaySet
+ * @param {Object} dataSource
+ * @return {Object} CornerstoneTools Stack
+ */
+function _getCornerstoneStack(displaySet, dataSource) {
+  const { frameIndex } = displaySet;
+
+  // Get stack from Stack Manager
+  const storedStack = StackManager.findOrCreateStack(displaySet, dataSource);
+
+  // Clone the stack here so we don't mutate it
+  const stack = Object.assign({}, storedStack);
+
+  stack.currentImageIdIndex = frameIndex;
+
+  return stack;
 }
 
+async function _getViewportData(dataSource, displaySet) {
+  let viewportData;
+
+  const stack = _getCornerstoneStack(displaySet, dataSource);
+
+  viewportData = {
+    StudyInstanceUID: displaySet.StudyInstanceUID,
+    displaySetInstanceUID: displaySet.displaySetInstanceUID,
+    stack,
+  };
+
+  return viewportData;
+};
+
 export default OHIFCornerstoneViewport;