fix: cornerstone3d hydration and renaming (#2818)

* update readme

* renamed cornerstone extension

* wip for renaming cornerstone3D variables

* wip for renaming cornerstone3D variables

* wip for fixing bugs for SR viewport

* fix: jumpToMeasurement and initial label after hydration

README.md

@@ -190,7 +190,7 @@ you'll see the following:
 ├── extensions               #
 │   ├── _example             # Skeleton of example extension
 │   ├── default              #
-│   ├── cornerstone-3d       # image rendering and tools w/ Cornerstone3D
+│   ├── cornerstone       # image rendering and tools w/ Cornerstone
 │   ├── cornerstone- dicom-sr #
 │   └── measurement-tracking #
 │

extensions/cornerstone-dicom-sr/package.json

@@ -39,7 +39,7 @@
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
-    "@ohif/extension-cornerstone-3d": "^3.0.0",
+    "@ohif/extension-cornerstone": "^3.0.0",
     "@ohif/extension-measurement-tracking": "^3.0.0"
   },
   "dependencies": {

extensions/cornerstone-dicom-sr/src/getSopClassHandlerModule.js

@@ -483,7 +483,7 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
     const cornerstoneFreeTextFindingSite = FindingSites.find(
       FindingSite =>
         CodingSchemeDesignators.CornerstoneCodeSchemes.includes(
-          Finding.ConceptCodeSequence.CodingSchemeDesignator
+          FindingSite.ConceptCodeSequence.CodingSchemeDesignator
         ) &&
         FindingSite.ConceptCodeSequence.CodeValue ===
           CodeNameCodeSequenceValues.CornerstoneFreeText

extensions/cornerstone-dicom-sr/src/tools/modules/dicomSRModule.js

@@ -1,4 +1,4 @@
-import * as cornerstone3D from '@cornerstonejs/core';
+import { getEnabledElement } from '@cornerstonejs/core';
 
 const state = {
   TrackingUniqueIdentifier: null,
@@ -18,7 +18,7 @@ function setTrackingUniqueIdentifiersForElement(
   trackingUniqueIdentifiers,
   activeIndex = 0
 ) {
-  const enabledElement = cornerstone3D.getEnabledElement(element);
+  const enabledElement = getEnabledElement(element);
   const { viewport } = enabledElement;
 
   state.trackingIdentifiersByViewportId[viewport.id] = {
@@ -31,7 +31,7 @@ function setActiveTrackingUniqueIdentifierForElement(
   element,
   TrackingUniqueIdentifier
 ) {
-  const enabledElement = cornerstone3D.getEnabledElement(element);
+  const enabledElement = getEnabledElement(element);
   const { viewport } = enabledElement;
 
   const trackingIdentifiersForElement =
@@ -47,7 +47,7 @@ function setActiveTrackingUniqueIdentifierForElement(
 }
 
 function getTrackingUniqueIdentifiersForElement(element) {
-  const enabledElement = cornerstone3D.getEnabledElement(element);
+  const enabledElement = getEnabledElement(element);
   const { viewport } = enabledElement;
 
   if (state.trackingIdentifiersByViewportId[viewport.id]) {

extensions/cornerstone-dicom-sr/src/tools/tools/SRArrowAnnotate.ts

@@ -2,7 +2,7 @@ import { ArrowAnnotateTool } from '@cornerstonejs/tools';
 
 /**
  * The reason we are extending ArrowAnnotateTool is to create a new tool for SR
- * viewport which basically has a different name. This is done since Cornerstone3D
+ * viewport which basically has a different name. This is done since Cornerstone
  * has shifted from creating tool instances for each annotation, and we have ArrowAnnotate
  * mappers at the MeasurementService, so if we didn't do this, we would be mapping
  * the SR annotation to the MeasurementService (since there is a ArrowAnnotateTool mapper),

extensions/cornerstone-dicom-sr/src/tools/tools/SRBidirectional.ts

@@ -2,7 +2,7 @@ import { BidirectionalTool } from '@cornerstonejs/tools';
 
 /**
  * The reason we are extending BidirectionalTool is to create a new tool for SR
- * viewport which basically has a different name. This is done since Cornerstone3D
+ * viewport which basically has a different name. This is done since Cornerstone
  * has shifted from creating tool instances for each annotation, and we have Bidirectional
  * mappers at the MeasurementService, so if we didn't do this, we would be mapping
  * the SR annotation to the MeasurementService (since there is a BidirectionalTool mapper),

extensions/cornerstone-dicom-sr/src/tools/tools/SREllipticalROI.ts

@@ -2,7 +2,7 @@ import { EllipticalROITool } from '@cornerstonejs/tools';
 
 /**
  * The reason we are extending EllipticalROITool is to create a new tool for SR
- * viewport which basically has a different name. This is done since Cornerstone3D
+ * viewport which basically has a different name. This is done since Cornerstone
  * has shifted from creating tool instances for each annotation, and we have EllipticalROI
  * mappers at the MeasurementService, so if we didn't do this, we would be mapping
  * the SR annotation to the MeasurementService (since there is a EllipticalROITool mapper),

extensions/cornerstone-dicom-sr/src/tools/tools/SRLength.ts

@@ -2,7 +2,7 @@ import { LengthTool } from '@cornerstonejs/tools';
 
 /**
  * The reason we are extending LengthTool is to create a new tool for SR
- * viewport which basically has a different name. This is done since Cornerstone3D
+ * viewport which basically has a different name. This is done since Cornerstone
  * has shifted from creating tool instances for each annotation, and we have Length
  * mappers at the MeasurementService, so if we didn't do this, we would be mapping
  * the SR annotation to the MeasurementService (since there is a LengthTool mapper),

extensions/cornerstone-dicom-sr/src/utils/addMeasurement.ts

@@ -1,6 +1,6 @@
 import { vec3 } from 'gl-matrix';
 import { Types, annotation } from '@cornerstonejs/tools';
-import * as cornerstone3D from '@cornerstonejs/core';
+import { metaData, utilities, Types as csTypes } from '@cornerstonejs/core';
 import toolNames from '../tools/toolNames';
 import SCOORD_TYPES from '../constants/scoordTypes';
 
@@ -41,10 +41,7 @@ export default function addMeasurement(
   });
 
   // Use the metadata provider to grab its imagePlaneModule metadata
-  const imagePlaneModule = cornerstone3D.metaData.get(
-    'imagePlaneModule',
-    imageId
-  );
+  const imagePlaneModule = metaData.get('imagePlaneModule', imageId);
 
   const annotationManager = annotation.state.getDefaultAnnotationManager();
 
@@ -89,7 +86,7 @@ function _getRenderableData(
 ) {
   const [cornerstoneTag, toolName] = TrackingIdentifier.split(':');
 
-  let renderableData: cornerstone3D.Types.Point3[];
+  let renderableData: csTypes.Point3[];
 
   switch (GraphicType) {
     case SCOORD_TYPES.POINT:
@@ -98,7 +95,7 @@ function _getRenderableData(
       renderableData = [];
 
       for (let i = 0; i < GraphicData.length; i += 2) {
-        const worldPos = cornerstone3D.utilities.imageToWorldCoords(imageId, [
+        const worldPos = utilities.imageToWorldCoords(imageId, [
           GraphicData[i],
           GraphicData[i + 1],
         ]);
@@ -110,7 +107,7 @@ function _getRenderableData(
     case SCOORD_TYPES.CIRCLE: {
       const pointsWorld = [];
       for (let i = 0; i < GraphicData.length; i += 2) {
-        const worldPos = cornerstone3D.utilities.imageToWorldCoords(imageId, [
+        const worldPos = utilities.imageToWorldCoords(imageId, [
           GraphicData[i],
           GraphicData[i + 1],
         ]);
@@ -126,10 +123,7 @@ function _getRenderableData(
 
       const radius = vec3.distance(center, onPerimeter);
 
-      const imagePlaneModule = cornerstone3D.metaData.get(
-        'imagePlaneModule',
-        imageId
-      );
+      const imagePlaneModule = metaData.get('imagePlaneModule', imageId);
 
       if (!imagePlaneModule) {
         throw new Error('No imagePlaneModule found');
@@ -139,8 +133,8 @@ function _getRenderableData(
         columnCosines,
         rowCosines,
       }: {
-        columnCosines: cornerstone3D.Types.Point3;
-        rowCosines: cornerstone3D.Types.Point3;
+        columnCosines: csTypes.Point3;
+        rowCosines: csTypes.Point3;
       } = imagePlaneModule;
 
       // we need to get major/minor axis (which are both the same size major = minor)
@@ -160,10 +154,10 @@ function _getRenderableData(
       vec3.scaleAndAdd(secondAxisEnd, center, rowCosines, -radius);
 
       renderableData = [
-        firstAxisStart as cornerstone3D.Types.Point3,
-        firstAxisEnd as cornerstone3D.Types.Point3,
-        secondAxisStart as cornerstone3D.Types.Point3,
-        secondAxisEnd as cornerstone3D.Types.Point3,
+        firstAxisStart as csTypes.Point3,
+        firstAxisEnd as csTypes.Point3,
+        secondAxisStart as csTypes.Point3,
+        secondAxisEnd as csTypes.Point3,
       ];
 
       break;
@@ -174,9 +168,9 @@ function _getRenderableData(
       // ellipse so we need to identify if the majorAxis is horizontal or vertical
       // and then choose the correct points to use for the ellipse.
 
-      const pointsWorld: cornerstone3D.Types.Point3[] = [];
+      const pointsWorld: csTypes.Point3[] = [];
       for (let i = 0; i < GraphicData.length; i += 2) {
-        const worldPos = cornerstone3D.utilities.imageToWorldCoords(imageId, [
+        const worldPos = utilities.imageToWorldCoords(imageId, [
           GraphicData[i],
           GraphicData[i + 1],
         ]);
@@ -199,18 +193,15 @@ function _getRenderableData(
       vec3.sub(minorAxisVec, minorAxisEnd, minorAxisStart);
       vec3.normalize(minorAxisVec, minorAxisVec);
 
-      const imagePlaneModule = cornerstone3D.metaData.get(
-        'imagePlaneModule',
-        imageId
-      );
+      const imagePlaneModule = metaData.get('imagePlaneModule', imageId);
 
       if (!imagePlaneModule) {
         throw new Error('imageId does not have imagePlaneModule metadata');
       }
 
       const {
         columnCosines,
-      }: { columnCosines: cornerstone3D.Types.Point3 } = imagePlaneModule;
+      }: { columnCosines: csTypes.Point3 } = imagePlaneModule;
 
       // find which axis is parallel to the columnCosines
       const columnCosinesVec = vec3.fromValues(...columnCosines);

extensions/cornerstone-dicom-sr/src/utils/getFilteredCornerstoneToolState.ts

@@ -1,5 +1,5 @@
 import OHIF from '@ohif/core';
-import * as cornerstone3DTools from '@cornerstonejs/tools';
+import { annotation } from '@cornerstonejs/tools';
 const { log } = OHIF;
 
 function getFilteredCornerstoneToolState(
@@ -67,7 +67,7 @@ function getFilteredCornerstoneToolState(
   const uidFilter = measurementData.map(md => md.uid);
   const uids = uidFilter.slice();
 
-  const annotationManager = cornerstone3DTools.annotation.state.getDefaultAnnotationManager();
+  const annotationManager = annotation.state.getDefaultAnnotationManager();
   const framesOfReference = annotationManager.getFramesOfReference();
 
   for (let i = 0; i < framesOfReference.length; i++) {

extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx

@@ -29,7 +29,7 @@ function OHIFCornerstoneSRViewport(props) {
 
   const {
     DisplaySetService,
-    Cornerstone3DViewportService,
+    CornerstoneViewportService,
   } = servicesManager.services;
 
   // SR viewport will always have a single display set
@@ -95,9 +95,9 @@ function OHIFCornerstoneSRViewport(props) {
   );
 
   /**
-   * OnElementEnabled callback which is called after the cornerstone3DExtension
+   * OnElementEnabled callback which is called after the cornerstoneExtension
    * has enabled the element. Note: we delegate all the image rendering to
-   * cornerstone3DExtension, so we don't need to do anything here regarding
+   * cornerstoneExtension, so we don't need to do anything here regarding
    * the image rendering, element enabling etc.
    */
   const onElementEnabled = evt => {
@@ -143,11 +143,11 @@ function OHIFCornerstoneSRViewport(props) {
           // imageIdIndex will handle it by updating the viewport, but if they
           // are the same we just need to use MeasurementService to jump to the
           // new measurement
-          const viewportInfo = Cornerstone3DViewportService.getViewportInfoByIndex(
+          const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex(
             viewportIndex
           );
 
-          const csViewport = Cornerstone3DViewportService.getCornerstone3DViewport(
+          const csViewport = CornerstoneViewportService.getCornerstoneViewport(
             viewportInfo.getViewportId()
           );
 
@@ -166,13 +166,13 @@ function OHIFCornerstoneSRViewport(props) {
     [dataSource, srDisplaySet, activeImageDisplaySetData, viewportIndex]
   );
 
-  const getCornerstone3DViewport = useCallback(() => {
+  const getCornerstoneViewport = useCallback(() => {
     if (!activeImageDisplaySetData) {
       return null;
     }
 
     const { component: Component } = extensionManager.getModuleEntry(
-      '@ohif/extension-cornerstone-3d.viewportModule.cornerstone-3d'
+      '@ohif/extension-cornerstone.viewportModule.cornerstone'
     );
 
     const { measurements } = srDisplaySet;
@@ -182,6 +182,10 @@ function OHIFCornerstoneSRViewport(props) {
       return null;
     }
 
+    const initialImageIndex = activeImageDisplaySetData.images.findIndex(
+      image => image.imageId === measurement.imageId
+    );
+
     return (
       <Component
         {...props}
@@ -192,7 +196,7 @@ function OHIFCornerstoneSRViewport(props) {
           toolGroupId: `${SR_TOOLGROUP_BASE_NAME}`,
         }}
         onElementEnabled={onElementEnabled}
-        initialImageIdOrIndex={measurement.imageId}
+        initialImageIndex={initialImageIndex}
       ></Component>
     );
   }, [activeImageDisplaySetData, viewportIndex, measurementSelected]);
@@ -373,7 +377,7 @@ function OHIFCornerstoneSRViewport(props) {
       />
 
       <div className="relative flex flex-row w-full h-full overflow-hidden">
-        {getCornerstone3DViewport()}
+        {getCornerstoneViewport()}
         <div className="absolute w-full">
           {viewportDialogState.viewportIndex === viewportIndex && (
             <Notification

extensions/cornerstone/README.md

@@ -0,0 +1 @@
+# Cornerstone

extensions/cornerstone-3d/package.json → extensions/cornerstone/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@ohif/extension-cornerstone-3d",
+  "name": "@ohif/extension-cornerstone",
   "version": "3.0.0",
-  "description": "OHIF extension for Cornerstone3D",
+  "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",
   "repository": "OHIF/Viewers",

extensions/cornerstone-3d/src/Viewport/OHIFCornerstone3DViewport.css → extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.css

@@ -4,7 +4,7 @@
   position: relative;
 }
 
-.cornerstone3D-viewport-element {
+.cornerstone-viewport-element {
   width: 100%;
   height: 100%;
   position: relative;