feat: crosshair mpr

apps/aorta/package.json

@@ -23,7 +23,6 @@
     "js-cookie": "3.0.5",
     "three": "0.156.1",
     "path-to-regexp": "6.2.1",
-    "cornerstone-core": "2.6.1",
     "dicom-parser": "1.8.21",
     "@msgpack/msgpack": "3.0.0-beta2",
     "pako": "2.1.0",
@@ -32,8 +31,9 @@
     "@cornerstonejs/core": "1.41.0",
     "dcmjs": "0.30.0",
     "dicomweb-client": "0.10.3",
-    "@cornerstonejs/tools": "3.0.2",
-    "@cornerstonejs/streaming-image-volume-loader": "1.41.0"
+    "@cornerstonejs/tools": "1.41.0",
+    "@cornerstonejs/streaming-image-volume-loader": "1.41.0",
+    "@cornerstonejs/calculate-suv": "1.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.8",

apps/aorta/public/d-apple.json

@@ -0,0 +1,143 @@
+[
+  "5.0.37",
+  [
+    "apple a14",
+    "14",
+    "a14 apple",
+    0,
+    [
+      [
+        2704,
+        1756,
+        120
+      ]
+    ]
+  ],
+  [
+    "apple m1",
+    "1",
+    "apple m1",
+    0,
+    [
+      [
+        2880,
+        1800,
+        198
+      ]
+    ]
+  ],
+  [
+    "apple m1 max",
+    "1",
+    "apple m1 max",
+    0,
+    [
+      [
+        3456,
+        2234,
+        556
+      ]
+    ]
+  ],
+  [
+    "apple m1 pro",
+    "1",
+    "apple m1 pro",
+    0,
+    [
+      [
+        3024,
+        1964,
+        342
+      ]
+    ]
+  ],
+  [
+    "apple m1 ultra",
+    "1",
+    "apple m1 ultra",
+    0,
+    [
+      [
+        5120,
+        2880,
+        437
+      ]
+    ]
+  ],
+  [
+    "apple m2",
+    "2",
+    "apple m2",
+    0,
+    [
+      [
+        2880,
+        1800,
+        60
+      ],
+      [
+        2940,
+        1912,
+        209
+      ]
+    ]
+  ],
+  [
+    "apple m2 max",
+    "2",
+    "apple m2 max",
+    0,
+    [
+      [
+        3456,
+        2234,
+        120
+      ]
+    ]
+  ],
+  [
+    "apple m2 pro",
+    "2",
+    "apple m2 pro",
+    0,
+    [
+      [
+        3024,
+        1964,
+        120
+      ],
+      [
+        5120,
+        2880,
+        60
+      ]
+    ]
+  ],
+  [
+    "apple m2 ultra",
+    "2",
+    "apple m2 ultra",
+    0,
+    [
+      [
+        5120,
+        2880,
+        60
+      ]
+    ]
+  ],
+  [
+    "apple paravirtual device",
+    "",
+    "apple device paravirtual",
+    0,
+    [
+      [
+        1024,
+        768,
+        30
+      ]
+    ]
+  ]
+]

apps/aorta/scripts/dev.proxy.ts

@@ -31,5 +31,5 @@ export const proxyMap: TProxyMap = {
     target: "http://localhost:5000/",
     changeOrigin: true,
     pathRewrite: { "^/py": "" },
-  },
+  }
 };

apps/aorta/scripts/webpack.dev.ts

@@ -20,7 +20,7 @@ interface Configuration extends WebpackConfiguration {
   devServer?: WebpackDevServerConfiguration;
 }
 
-const host = "127.0.0.1";
+const host = "0.0.0.0";
 const port = 9000;
 
 // 合并公共配置,并添加开发环境配置

apps/aorta/src/modules/Root/Viewer/CornerstoneDicomLoader/createImageIdsAndCacheMetaData.ts

@@ -5,6 +5,9 @@ import cornerstoneDICOMImageLoader from "@cornerstonejs/dicom-image-loader";
 import { getPixelSpacingInformation } from "./getPixelSpacingInformation";
 import { convertMultiframeImageIds } from "./convertMultiframeImageIds";
 import { removeInvalidTags } from "./removeInvalidTags";
+import getPTImageIdInstanceMetadata from "./getPTImageIdInstanceMetadata";
+import { calculateSUVScalingFactors } from "@cornerstonejs/calculate-suv";
+import ptScalingMetaDataProvider from "./ptScalingMetaDataProvider";
 
 const { DicomMetaDictionary } = dcmjs.data;
 const { calibratedPixelSpacingMetadataProvider } = utilities;
@@ -44,11 +47,22 @@ export const createImageIdsAndCacheMetaData = async (
     console.log("modality", modality);
 
     let imageIds = instances.map((instanceMetaData: any) => {
-      const seriesInstanceUID = instanceMetaData[SERIES_INSTANCE_UID].Value[0];
-      const sopInstanceUIDToUse =
+      const SeriesInstanceUID = instanceMetaData[SERIES_INSTANCE_UID].Value[0];
+      const SOPInstanceUIDToUse =
         options.SOPInstanceUID || instanceMetaData[SOP_INSTANCE_UID].Value[0];
 
-      const imageId = `wadors:${options.wadoRsRoot}/studies/${options.StudyInstanceUID}/series/${seriesInstanceUID}/instances/${sopInstanceUIDToUse}/frames/1`;
+      const prefix = "wadors:";
+
+      const imageId =
+        prefix +
+        options.wadoRsRoot +
+        "/studies/" +
+        options.StudyInstanceUID +
+        "/series/" +
+        SeriesInstanceUID +
+        "/instances/" +
+        SOPInstanceUIDToUse +
+        "/frames/1";
 
       cornerstoneDICOMImageLoader.wadors.metaDataManager.add(
         imageId,
@@ -62,6 +76,7 @@ export const createImageIdsAndCacheMetaData = async (
     imageIds.forEach((imageId) => {
       let instanceMetaData =
         cornerstoneDICOMImageLoader.wadors.metaDataManager.get(imageId);
+
       instanceMetaData = removeInvalidTags(instanceMetaData);
 
       if (instanceMetaData) {
@@ -81,8 +96,44 @@ export const createImageIdsAndCacheMetaData = async (
       }
     });
 
+    if (modality === "PT") {
+      const InstanceMetadataArray: any = [];
+      imageIds.forEach((imageId) => {
+        const instanceMetadata = getPTImageIdInstanceMetadata(imageId);
+
+        // TODO: Temporary fix because static-wado is producing a string, not an array of values
+        // (or maybe dcmjs isn't parsing it correctly?)
+        // It's showing up like 'DECY\\ATTN\\SCAT\\DTIM\\RAN\\RADL\\DCAL\\SLSENS\\NORM'
+        // but calculate-suv expects ['DECY', 'ATTN', ...]
+        if (typeof instanceMetadata.CorrectedImage === "string") {
+          instanceMetadata.CorrectedImage =
+            instanceMetadata.CorrectedImage.split("\\");
+        }
+
+        if (instanceMetadata) {
+          InstanceMetadataArray.push(instanceMetadata);
+        }
+      });
+      if (InstanceMetadataArray.length) {
+        try {
+          const suvScalingFactors = calculateSUVScalingFactors(
+            InstanceMetadataArray
+          );
+          InstanceMetadataArray.forEach((instanceMetadata, index) => {
+            ptScalingMetaDataProvider.addInstance(
+              imageIds[index],
+              suvScalingFactors[index]
+            );
+          });
+        } catch (error) {
+          console.log(error);
+        }
+      }
+    }
+
     return imageIds;
   } catch (error) {
+    console.log(error);
     throw new Error("PACS 中数据不存在");
   }
 };

apps/aorta/src/modules/Root/Viewer/CornerstoneDicomLoader/getPTImageIdInstanceMetadata.ts

@@ -0,0 +1,211 @@
+import { metaData } from "@cornerstonejs/core";
+import type { InstanceMetadata } from "@cornerstonejs/calculate-suv";
+
+export default function getPTImageIdInstanceMetadata(
+  imageId: string
+): InstanceMetadata {
+  const petSequenceModule = metaData.get("petIsotopeModule", imageId);
+  const generalSeriesModule = metaData.get("generalSeriesModule", imageId);
+  const patientStudyModule = metaData.get("patientStudyModule", imageId);
+
+  const ptSeriesModule = metaData.get("petSeriesModule", imageId);
+  const ptImageModule = metaData.get("petImageModule", imageId);
+
+  if (!petSequenceModule) {
+    throw new Error("petSequenceModule metadata is required");
+  }
+
+  const radiopharmaceuticalInfo = petSequenceModule.radiopharmaceuticalInfo;
+
+  const { seriesDate, seriesTime, acquisitionDate, acquisitionTime } =
+    generalSeriesModule;
+  const { patientWeight } = patientStudyModule;
+  const { correctedImage, units, decayCorrection } = ptSeriesModule;
+
+  if (
+    seriesDate === undefined ||
+    seriesTime === undefined ||
+    patientWeight === undefined ||
+    acquisitionDate === undefined ||
+    acquisitionTime === undefined ||
+    correctedImage === undefined ||
+    units === undefined ||
+    decayCorrection === undefined ||
+    radiopharmaceuticalInfo.radionuclideTotalDose === undefined ||
+    radiopharmaceuticalInfo.radionuclideHalfLife === undefined ||
+    (radiopharmaceuticalInfo.radiopharmaceuticalStartDateTime === undefined &&
+      seriesDate === undefined &&
+      radiopharmaceuticalInfo.radiopharmaceuticalStartTime === undefined)
+    //
+  ) {
+    throw new Error("required metadata are missing");
+  }
+
+  const instanceMetadata: InstanceMetadata = {
+    CorrectedImage: correctedImage,
+    Units: units,
+    RadionuclideHalfLife: radiopharmaceuticalInfo.radionuclideHalfLife,
+    RadionuclideTotalDose: radiopharmaceuticalInfo.radionuclideTotalDose,
+    DecayCorrection: decayCorrection,
+    PatientWeight: patientWeight,
+    SeriesDate: seriesDate,
+    SeriesTime: seriesTime,
+    AcquisitionDate: acquisitionDate,
+    AcquisitionTime: acquisitionTime,
+  };
+
+  if (
+    radiopharmaceuticalInfo.radiopharmaceuticalStartDateTime &&
+    radiopharmaceuticalInfo.radiopharmaceuticalStartDateTime !== undefined &&
+    typeof radiopharmaceuticalInfo.radiopharmaceuticalStartDateTime === "string"
+  ) {
+    instanceMetadata.RadiopharmaceuticalStartDateTime =
+      radiopharmaceuticalInfo.radiopharmaceuticalStartDateTime;
+  }
+
+  if (
+    radiopharmaceuticalInfo.radiopharmaceuticalStartDateTime &&
+    radiopharmaceuticalInfo.radiopharmaceuticalStartDateTime !== undefined &&
+    typeof radiopharmaceuticalInfo.radiopharmaceuticalStartDateTime !== "string"
+  ) {
+    const dateString = convertInterfaceDateToString(
+      radiopharmaceuticalInfo.radiopharmaceuticalStartDateTime
+    );
+    instanceMetadata.RadiopharmaceuticalStartDateTime = dateString;
+  }
+
+  if (
+    instanceMetadata.AcquisitionDate &&
+    instanceMetadata.AcquisitionDate !== undefined &&
+    typeof instanceMetadata.AcquisitionDate !== "string"
+  ) {
+    const dateString = convertInterfaceDateToString(
+      instanceMetadata.AcquisitionDate
+    );
+    instanceMetadata.AcquisitionDate = dateString;
+  }
+
+  if (
+    instanceMetadata.SeriesDate &&
+    instanceMetadata.SeriesDate !== undefined &&
+    typeof instanceMetadata.SeriesDate !== "string"
+  ) {
+    const dateString = convertInterfaceDateToString(
+      instanceMetadata.SeriesDate
+    );
+    instanceMetadata.SeriesDate = dateString;
+  }
+
+  if (
+    radiopharmaceuticalInfo.radiopharmaceuticalStartTime &&
+    radiopharmaceuticalInfo.radiopharmaceuticalStartTime !== undefined &&
+    typeof radiopharmaceuticalInfo.radiopharmaceuticalStartTime === "string"
+  ) {
+    instanceMetadata.RadiopharmaceuticalStartTime =
+      radiopharmaceuticalInfo.radiopharmaceuticalStartTime;
+  }
+
+  if (
+    radiopharmaceuticalInfo.radiopharmaceuticalStartTime &&
+    radiopharmaceuticalInfo.radiopharmaceuticalStartTime !== undefined &&
+    typeof radiopharmaceuticalInfo.radiopharmaceuticalStartTime !== "string"
+  ) {
+    const timeString = convertInterfaceTimeToString(
+      radiopharmaceuticalInfo.radiopharmaceuticalStartTime
+    );
+    instanceMetadata.RadiopharmaceuticalStartTime = timeString;
+  }
+
+  if (
+    instanceMetadata.AcquisitionTime &&
+    instanceMetadata.AcquisitionTime !== undefined &&
+    typeof instanceMetadata.AcquisitionTime !== "string"
+  ) {
+    const timeString = convertInterfaceTimeToString(
+      instanceMetadata.AcquisitionTime
+    );
+    instanceMetadata.AcquisitionTime = timeString;
+  }
+
+  if (
+    instanceMetadata.SeriesTime &&
+    instanceMetadata.SeriesTime !== undefined &&
+    typeof instanceMetadata.SeriesTime !== "string"
+  ) {
+    const timeString = convertInterfaceTimeToString(
+      instanceMetadata.SeriesTime
+    );
+    instanceMetadata.SeriesTime = timeString;
+  }
+
+  if (
+    ptImageModule.frameReferenceTime &&
+    ptImageModule.frameReferenceTime !== undefined
+  ) {
+    instanceMetadata.FrameReferenceTime = ptImageModule.frameReferenceTime;
+  }
+
+  if (
+    ptImageModule.actualFrameDuration &&
+    ptImageModule.actualFrameDuration !== undefined
+  ) {
+    instanceMetadata.ActualFrameDuration = ptImageModule.actualFrameDuration;
+  }
+
+  if (
+    patientStudyModule.patientSex &&
+    patientStudyModule.patientSex !== undefined
+  ) {
+    instanceMetadata.PatientSex = patientStudyModule.patientSex;
+  }
+
+  if (
+    patientStudyModule.patientSize &&
+    patientStudyModule.patientSize !== undefined
+  ) {
+    instanceMetadata.PatientSize = patientStudyModule.patientSize;
+  }
+
+  // Todo: add private tags
+  // if (
+  //   dicomMetaData['70531000'] ||
+  //   dicomMetaData['70531000'] !== undefined ||
+  //   dicomMetaData['70531009'] ||
+  //   dicomMetaData['70531009'] !== undefined
+  // ) {
+  //   const philipsPETPrivateGroup: PhilipsPETPrivateGroup = {
+  //     SUVScaleFactor: dicomMetaData['70531000'],
+  //     ActivityConcentrationScaleFactor: dicomMetaData['70531009'],
+  //   };
+  //   instanceMetadata.PhilipsPETPrivateGroup = philipsPETPrivateGroup;
+  // }
+
+  // if (dicomMetaData['0009100d'] && dicomMetaData['0009100d'] !== undefined) {
+  //   instanceMetadata.GEPrivatePostInjectionDateTime = dicomMetaData['0009100d'];
+  // }
+
+  return instanceMetadata;
+}
+
+function convertInterfaceTimeToString(time): string {
+  const hours = `${time.hours || "00"}`.padStart(2, "0");
+  const minutes = `${time.minutes || "00"}`.padStart(2, "0");
+  const seconds = `${time.seconds || "00"}`.padStart(2, "0");
+
+  const fractionalSeconds = `${time.fractionalSeconds || "000000"}`.padEnd(
+    6,
+    "0"
+  );
+
+  const timeString = `${hours}${minutes}${seconds}.${fractionalSeconds}`;
+  return timeString;
+}
+
+function convertInterfaceDateToString(date): string {
+  const month = `${date.month}`.padStart(2, "0");
+  const day = `${date.day}`.padStart(2, "0");
+  const dateString = `${date.year}${month}${day}`;
+  return dateString;
+}
+
+export { getPTImageIdInstanceMetadata };

apps/aorta/src/modules/Root/Viewer/CornerstoneDicomLoader/initCornerstoneDicomImageLoader.ts

@@ -2,10 +2,19 @@ import dicomParser from "dicom-parser";
 import * as cornerstone from "@cornerstonejs/core";
 import cornerstoneDICOMImageLoader from "@cornerstonejs/dicom-image-loader";
 
+window.cornerstone = cornerstone;
+
 export const initCornerstoneDICOMImageLoader = () => {
   const { preferSizeOverAccuracy, useNorm16Texture } =
     cornerstone.getConfiguration().rendering;
 
+  cornerstone.setConfiguration({
+    detectGPUConfig: {
+      benchmarksURL: "http://localhost:9000",
+    },
+    rendering: cornerstone.getConfiguration().rendering,
+  });
+
   cornerstoneDICOMImageLoader.external.cornerstone = cornerstone;
   cornerstoneDICOMImageLoader.external.dicomParser = dicomParser;
   cornerstoneDICOMImageLoader.configure({
@@ -16,8 +25,14 @@ export const initCornerstoneDICOMImageLoader = () => {
     },
   });
 
+  let maxWebWorkers = 1;
+
+  if (navigator.hardwareConcurrency) {
+    maxWebWorkers = Math.min(navigator.hardwareConcurrency, 7);
+  }
+
   const config = {
-    maxWebWorkers: navigator.hardwareConcurrency ?? 7,
+    maxWebWorkers,
     startWebWorkersOnDemand: false,
     taskConfiguration: {
       decodeTask: {

apps/aorta/src/modules/Root/Viewer/Crosshair/index.tsx

@@ -1,18 +1,17 @@
+import { useEffect, useRef } from "react";
+import initDemo from "./util/initDemo.js";
 import {
-  Enums,
   RenderingEngine,
+  Types,
+  Enums,
   setVolumesForViewports,
   volumeLoader,
+  getRenderingEngine,
 } from "@cornerstonejs/core";
-import { createImageIdsAndCacheMetaData } from "../CornerstoneDicomLoader/createImageIdsAndCacheMetaData";
-import { initCornerstone } from "../CornerstoneDicomLoader/init";
-import { useEffect, useRef } from "react";
 import * as cornerstoneTools from "@cornerstonejs/tools";
-import { PublicViewportInput } from "@cornerstonejs/core/dist/types/types";
-import { setCtTransferFunctionForVolumeActor } from "./setCtTransferFunctionForVolumeActor";
-interface CorsshairProps {
-  children?: JSX.Element;
-}
+import createImageIdsAndCacheMetaData from "./util/createImageIdsAndCacheMetaData";
+import { PublicViewportInput } from "@cornerstonejs/core/dist/types/types/IViewport.js";
+import setCtTransferFunctionForVolumeActor from "./util/setCtTransferFunctionForVolumeActor";
 
 const {
   ToolGroupManager,
@@ -21,126 +20,185 @@ const {
   StackScrollMouseWheelTool,
 } = cornerstoneTools;
 
-const toolGroupId = "MY_TOOLGROUP_ID";
+const { ViewportType } = Enums;
+
+interface CrosshairMprProps {
+  children?: JSX.Element;
+}
+
+const viewportId1 = "CT_AXIAL";
+const viewportId2 = "CT_SAGITTAL";
+const viewportId3 = "CT_CORONAL";
+const toolGroupId = "group";
+
+const viewportColors = {
+  [viewportId1]: "rgb(200, 0, 0)",
+  [viewportId2]: "rgb(200, 200, 0)",
+  [viewportId3]: "rgb(0, 200, 0)",
+};
+
+const viewportReferenceLineControllable = [
+  viewportId1,
+  viewportId2,
+  viewportId3,
+];
+
+const viewportReferenceLineDraggableRotatable = [
+  viewportId1,
+  viewportId2,
+  viewportId3,
+];
+
+const viewportReferenceLineSlabThicknessControlsOn = [
+  viewportId1,
+  viewportId2,
+  viewportId3,
+];
+
+// Define a unique id for the volume
 const volumeName = "CT_VOLUME_ID"; // Id of the volume less loader prefix
 const volumeLoaderScheme = "cornerstoneStreamingImageVolume"; // Loader id which defines which volume loader to use
 const volumeId = `${volumeLoaderScheme}:${volumeName}`; // VolumeId with loader id + volume id
 
-const renderingEngineId = "myRenderingEngine";
-const viewportA = "CT_AXIAL";
-const viewportB = "CT_SAGITTAL";
-const viewportC = "CT_CORONAL";
+function getReferenceLineColor(viewportId) {
+  return viewportColors[viewportId];
+}
 
-const viewportColors = {
-  [viewportA]: "rgb(200, 0, 0)",
-  [viewportB]: "rgb(200, 200, 0)",
-  [viewportC]: "rgb(0, 200, 0)",
-};
+function getReferenceLineControllable(viewportId) {
+  const index = viewportReferenceLineControllable.indexOf(viewportId);
+  return index !== -1;
+}
 
-const { ViewportType } = Enums;
+function getReferenceLineDraggableRotatable(viewportId) {
+  const index = viewportReferenceLineDraggableRotatable.indexOf(viewportId);
+  return index !== -1;
+}
 
-const StudyInstanceUID =
-  "1.2.840.113564.345049290535.9692.637552042156233117.433089";
-const SeriesInstanceUID =
-  "1.3.12.2.1107.5.1.4.76315.30000021042706150001900118311";
+function getReferenceLineSlabThicknessControlsOn(viewportId) {
+  const index =
+    viewportReferenceLineSlabThicknessControlsOn.indexOf(viewportId);
+  return index !== -1;
+}
 
-export const Corsshair = (props: CorsshairProps) => {
-  const viewportA = useRef(null);
-  const viewportB = useRef(null);
-  const viewportC = useRef(null);
+export const CrosshairMpr = (props: CrosshairMprProps) => {
+  const viewportId1Ref = useRef(null);
+  const viewportId2Ref = useRef(null);
+  const viewportId3Ref = useRef(null);
+
+  cornerstoneTools.addTool(StackScrollMouseWheelTool);
+  cornerstoneTools.addTool(CrosshairsTool);
 
   const run = async () => {
-    await initCornerstone();
-    // Get Cornerstone imageIds and fetch metadata into RAM
+    initDemo();
+
+    // Get Cornerstone imageIds for the source data and fetch metadata into RAM
     const imageIds = await createImageIdsAndCacheMetaData({
-      StudyInstanceUID,
-      SeriesInstanceUID,
+      StudyInstanceUID:
+        "1.2.840.113564.345049290535.9692.637552042156233117.433089",
+      SeriesInstanceUID:
+        "1.3.12.2.1107.5.1.4.76315.30000021042706150001900118311",
       wadoRsRoot: "/dicom-web",
     });
 
+    // Define a volume in memory
     const volume = await volumeLoader.createAndCacheVolume(volumeId, {
       imageIds,
     });
 
-    console.log(volume)
-
     // Instantiate a rendering engine
-    // const renderingEngine = new RenderingEngine(renderingEngineId);
+    const renderingEngineId = "myRenderingEngine";
+    const renderingEngine = new RenderingEngine(renderingEngineId);
 
-    // if (viewportA.current && viewportB.current && viewportC.current) {
-    //   // Create the viewports
-    //   const viewportInputArray: PublicViewportInput[] = [
-    //     {
-    //       viewportId: viewportA.current,
-    //       type: ViewportType.ORTHOGRAPHIC,
-    //       element: viewportA.current,
-    //       defaultOptions: {
-    //         orientation: Enums.OrientationAxis.AXIAL,
-    //         background: [0, 0, 0],
-    //       },
-    //     },
-    //     {
-    //       viewportId: viewportB.current,
-    //       type: ViewportType.ORTHOGRAPHIC,
-    //       element: viewportB.current,
-    //       defaultOptions: {
-    //         orientation: Enums.OrientationAxis.SAGITTAL,
-    //         background: [0, 0, 0],
-    //       },
-    //     },
-    //     {
-    //       viewportId: viewportC.current,
-    //       type: ViewportType.ORTHOGRAPHIC,
-    //       element: viewportC.current,
-    //       defaultOptions: {
-    //         orientation: Enums.OrientationAxis.CORONAL,
-    //         background: [0, 0, 0],
-    //       },
-    //     },
-    //   ];
+    // Create the viewports
+    const viewportInputArray: PublicViewportInput[] = [
+      {
+        viewportId: viewportId1,
+        type: ViewportType.ORTHOGRAPHIC,
+        element: viewportId1Ref.current!,
+        defaultOptions: {
+          orientation: Enums.OrientationAxis.AXIAL,
+          background: [0, 0, 0],
+        },
+      },
+      {
+        viewportId: viewportId2,
+        type: ViewportType.ORTHOGRAPHIC,
+        element: viewportId2Ref.current!,
+        defaultOptions: {
+          orientation: Enums.OrientationAxis.SAGITTAL,
+          background: [0, 0, 0],
+        },
+      },
+      {
+        viewportId: viewportId3,
+        type: ViewportType.ORTHOGRAPHIC,
+        element: viewportId3Ref.current!,
+        defaultOptions: {
+          orientation: Enums.OrientationAxis.CORONAL,
+          background: [0, 0, 0],
+        },
+      },
+    ];
 
-    //   renderingEngine.setViewports(viewportInputArray);
+    renderingEngine.setViewports(viewportInputArray);
 
-    //   volume.load();
+    // Set the volume to load
+    volume.load();
 
-    //   await setVolumesForViewports(
-    //     renderingEngine,
-    //     [
-    //       {
-    //         volumeId,
-    //         callback: () => setCtTransferFunctionForVolumeActor,
-    //       },
-    //     ],
-    //     [viewportA.current!, viewportB.current!, viewportC.current!]
-    //   );
+    // Set volumes on the viewports
+    await setVolumesForViewports(
+      renderingEngine,
+      [
+        {
+          volumeId,
+          callback: setCtTransferFunctionForVolumeActor,
+        },
+      ],
+      [viewportId1, viewportId2, viewportId3]
+    );
 
-    //   // Render the image
-    //   renderingEngine.renderViewports([
-    //     viewportA.current!,
-    //     viewportB.current!,
-    //     viewportC.current!,
-    //   ]);
-    // }
+    // Define tool groups to add the segmentation display tool to
+    const toolGroup = ToolGroupManager.createToolGroup(toolGroupId);
 
+    // For the crosshairs to operate, the viewports must currently be
+    // added ahead of setting the tool active. This will be improved in the future.
+    toolGroup.addViewport(viewportId1, renderingEngineId);
+    toolGroup.addViewport(viewportId2, renderingEngineId);
+    toolGroup.addViewport(viewportId3, renderingEngineId);
 
+    // Manipulation Tools
+    toolGroup.addTool(StackScrollMouseWheelTool.toolName);
+    // Add Crosshairs tool and configure it to link the three viewports
+    // These viewports could use different tool groups. See the PET-CT example
+    // for a more complicated used case.
+
+    toolGroup.addTool(CrosshairsTool.toolName, {
+      getReferenceLineColor,
+      getReferenceLineControllable,
+      getReferenceLineDraggableRotatable,
+      getReferenceLineSlabThicknessControlsOn,
+    });
+
+    toolGroup.setToolActive(CrosshairsTool.toolName, {
+      bindings: [{ mouseButton: 1 }],
+    });
+    // As the Stack Scroll mouse wheel is a tool using the `mouseWheelCallback`
+    // hook instead of mouse buttons, it does not need to assign any mouse button.
+    toolGroup.setToolActive(StackScrollMouseWheelTool.toolName);
+
+    renderingEngine.renderViewports([viewportId1, viewportId2, viewportId3]);
   };
 
   useEffect(() => {
     run();
   }, []);
-
   return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "space-evenly",
-        gap: 20,
-        height: 300,
-      }}
-    >
-      <div ref={viewportA}></div>
-      <div ref={viewportB}></div>
-      <div ref={viewportC}></div>
+    <div>
+      <div style={{ display: "flex", gap: 20 }}>
+        <div style={{ width: 300, height: 300 }} ref={viewportId1Ref}></div>
+        <div style={{ width: 300, height: 300 }} ref={viewportId2Ref}></div>
+        <div style={{ width: 300, height: 300 }} ref={viewportId3Ref}></div>
+      </div>
     </div>
   );
 };

apps/aorta/src/modules/Root/Viewer/Crosshair/util/convertMultiframeImageIds.js

@@ -0,0 +1,65 @@
+import { metaData } from '@cornerstonejs/core';
+import cornerstoneDICOMImageLoader from '@cornerstonejs/dicom-image-loader';
+/**
+ * preloads imageIds metadata in memory
+ **/
+async function prefetchMetadataInformation(imageIdsToPrefetch) {
+  for (let i = 0; i < imageIdsToPrefetch.length; i++) {
+    await cornerstoneDICOMImageLoader.wadouri.loadImage(imageIdsToPrefetch[i])
+      .promise;
+  }
+}
+
+function getFrameInformation(imageId) {
+  if (imageId.includes('wadors:')) {
+    const frameIndex = imageId.indexOf('/frames/');
+    const imageIdFrameless =
+      frameIndex > 0 ? imageId.slice(0, frameIndex + 8) : imageId;
+    return {
+      frameIndex,
+      imageIdFrameless,
+    };
+  } else {
+    const frameIndex = imageId.indexOf('&frame=');
+    let imageIdFrameless =
+      frameIndex > 0 ? imageId.slice(0, frameIndex + 7) : imageId;
+    if (!imageIdFrameless.includes('&frame=')) {
+      imageIdFrameless = imageIdFrameless + '&frame=';
+    }
+    return {
+      frameIndex,
+      imageIdFrameless,
+    };
+  }
+}
+/**
+ * Receives a list of imageids possibly referring to multiframe dicom images
+ * and returns a list of imageid where each imageid referes to one frame.
+ * For each imageId representing a multiframe image with n frames,
+ * it will create n new imageids, one for each frame, and returns the new list of imageids
+ * If a particular imageid no refer to a mutiframe image data, it will be just copied into the new list
+ * @returns new list of imageids where each imageid represents a frame
+ */
+function convertMultiframeImageIds(imageIds) {
+  const newImageIds = [];
+  imageIds.forEach((imageId) => {
+    const { imageIdFrameless } = getFrameInformation(imageId);
+    const instanceMetaData = metaData.get('multiframeModule', imageId);
+    if (
+      instanceMetaData &&
+      instanceMetaData.NumberOfFrames &&
+      instanceMetaData.NumberOfFrames > 1
+    ) {
+      const NumberOfFrames = instanceMetaData.NumberOfFrames;
+      for (let i = 0; i < NumberOfFrames; i++) {
+        const newImageId = imageIdFrameless + (i + 1);
+        newImageIds.push(newImageId);
+      }
+    } else {
+      newImageIds.push(imageId);
+    }
+  });
+  return newImageIds;
+}
+
+export { convertMultiframeImageIds, prefetchMetadataInformation };

apps/aorta/src/modules/Root/Viewer/Crosshair/util/createImageIdsAndCacheMetaData.js

@@ -0,0 +1,101 @@
+import { api } from 'dicomweb-client';
+import dcmjs from 'dcmjs';
+import { utilities } from '@cornerstonejs/core';
+import cornerstoneDICOMImageLoader from '@cornerstonejs/dicom-image-loader';
+import getPixelSpacingInformation from './getPixelSpacingInformation';
+import { convertMultiframeImageIds } from './convertMultiframeImageIds';
+import removeInvalidTags from './removeInvalidTags';
+
+const { DicomMetaDictionary } = dcmjs.data;
+const { calibratedPixelSpacingMetadataProvider } = utilities;
+
+/**
+/**
+ * Uses dicomweb-client to fetch metadata of a study, cache it in cornerstone,
+ * and return a list of imageIds for the frames.
+ *
+ * Uses the app config to choose which study to fetch, and which
+ * dicom-web server to fetch it from.
+ *
+ * @returns {string[]} An array of imageIds for instances in the study.
+ */
+
+export default async function createImageIdsAndCacheMetaData({
+  StudyInstanceUID,
+  SeriesInstanceUID,
+  SOPInstanceUID = null,
+  wadoRsRoot,
+  client = null,
+}) {
+  const SOP_INSTANCE_UID = '00080018';
+  const SERIES_INSTANCE_UID = '0020000E';
+  const MODALITY = '00080060';
+
+  const studySearchOptions = {
+    studyInstanceUID: StudyInstanceUID,
+    seriesInstanceUID: SeriesInstanceUID,
+  };
+
+  client = client || new api.DICOMwebClient({ url: wadoRsRoot });
+  let instances = await client.retrieveSeriesMetadata(studySearchOptions);
+
+  // if sop instance is provided we should filter the instances to only include the one we want
+  if (SOPInstanceUID) {
+    instances = instances.filter((instance) => {
+      return instance[SOP_INSTANCE_UID].Value[0] === SOPInstanceUID;
+    });
+  }
+
+  const modality = instances[0][MODALITY].Value[0];
+  let imageIds = instances.map((instanceMetaData) => {
+    const SeriesInstanceUID = instanceMetaData[SERIES_INSTANCE_UID].Value[0];
+    const SOPInstanceUIDToUse =
+      SOPInstanceUID || instanceMetaData[SOP_INSTANCE_UID].Value[0];
+
+    const prefix = 'wadors:';
+
+    const imageId =
+      prefix +
+      wadoRsRoot +
+      '/studies/' +
+      StudyInstanceUID +
+      '/series/' +
+      SeriesInstanceUID +
+      '/instances/' +
+      SOPInstanceUIDToUse +
+      '/frames/1';
+
+    cornerstoneDICOMImageLoader.wadors.metaDataManager.add(
+      imageId,
+      instanceMetaData
+    );
+    return imageId;
+  });
+
+  // if the image ids represent multiframe information, creates a new list with one image id per frame
+  // if not multiframe data available, just returns the same list given
+  imageIds = convertMultiframeImageIds(imageIds);
+
+  imageIds.forEach((imageId) => {
+    let instanceMetaData =
+      cornerstoneDICOMImageLoader.wadors.metaDataManager.get(imageId);
+
+    // It was using JSON.parse(JSON.stringify(...)) before but it is 8x slower
+    instanceMetaData = removeInvalidTags(instanceMetaData);
+
+    if (instanceMetaData) {
+      // Add calibrated pixel spacing
+      const metadata = DicomMetaDictionary.naturalizeDataset(instanceMetaData);
+      const pixelSpacing = getPixelSpacingInformation(metadata);
+
+      if (pixelSpacing) {
+        calibratedPixelSpacingMetadataProvider.add(imageId, {
+          rowPixelSpacing: parseFloat(pixelSpacing[0]),
+          columnPixelSpacing: parseFloat(pixelSpacing[1]),
+        });
+      }
+    }
+  });
+
+  return imageIds;
+}

apps/aorta/src/modules/Root/Viewer/Crosshair/util/getPixelSpacingInformation.js

@@ -0,0 +1,136 @@
+// See https://github.com/OHIF/Viewers/blob/94a9067fe3d291d30e25a1bda5913511388edea2/platform/core/src/utils/metadataProvider/getPixelSpacingInformation.js
+
+export default function getPixelSpacingInformation(instance) {
+  // See http://gdcm.sourceforge.net/wiki/index.php/Imager_Pixel_Spacing
+
+  // TODO: Add Ultrasound region spacing
+  // TODO: Add manual calibration
+
+  // TODO: Use ENUMS from dcmjs
+  const projectionRadiographSOPClassUIDs = [
+    '1.2.840.10008.5.1.4.1.1.1', //	CR Image Storage
+    '1.2.840.10008.5.1.4.1.1.1.1', //	Digital X-Ray Image Storage – for Presentation
+    '1.2.840.10008.5.1.4.1.1.1.1.1', //	Digital X-Ray Image Storage – for Processing
+    '1.2.840.10008.5.1.4.1.1.1.2', //	Digital Mammography X-Ray Image Storage – for Presentation
+    '1.2.840.10008.5.1.4.1.1.1.2.1', //	Digital Mammography X-Ray Image Storage – for Processing
+    '1.2.840.10008.5.1.4.1.1.1.3', //	Digital Intra – oral X-Ray Image Storage – for Presentation
+    '1.2.840.10008.5.1.4.1.1.1.3.1', //	Digital Intra – oral X-Ray Image Storage – for Processing
+    '1.2.840.10008.5.1.4.1.1.12.1', //	X-Ray Angiographic Image Storage
+    '1.2.840.10008.5.1.4.1.1.12.1.1', //	Enhanced XA Image Storage
+    '1.2.840.10008.5.1.4.1.1.12.2', //	X-Ray Radiofluoroscopic Image Storage
+    '1.2.840.10008.5.1.4.1.1.12.2.1', //	Enhanced XRF Image Storage
+    '1.2.840.10008.5.1.4.1.1.12.3', // X-Ray Angiographic Bi-plane Image Storage	Retired
+  ];
+
+  const {
+    PixelSpacing,
+    ImagerPixelSpacing,
+    SOPClassUID,
+    PixelSpacingCalibrationType,
+    PixelSpacingCalibrationDescription,
+    EstimatedRadiographicMagnificationFactor,
+    SequenceOfUltrasoundRegions,
+  } = instance;
+
+  const isProjection = projectionRadiographSOPClassUIDs.includes(SOPClassUID);
+
+  const TYPES = {
+    NOT_APPLICABLE: 'NOT_APPLICABLE',
+    UNKNOWN: 'UNKNOWN',
+    CALIBRATED: 'CALIBRATED',
+    DETECTOR: 'DETECTOR',
+  };
+
+  if (!isProjection) {
+    return PixelSpacing;
+  }
+
+  if (isProjection && !ImagerPixelSpacing) {
+    // If only Pixel Spacing is present, and this is a projection radiograph,
+    // PixelSpacing should be used, but the user should be informed that
+    // what it means is unknown
+    return {
+      PixelSpacing,
+      type: TYPES.UNKNOWN,
+      isProjection,
+    };
+  } else if (
+    PixelSpacing &&
+    ImagerPixelSpacing &&
+    PixelSpacing === ImagerPixelSpacing
+  ) {
+    // If Imager Pixel Spacing and Pixel Spacing are present and they have the same values,
+    // then the user should be informed that the measurements are at the detector plane
+    return {
+      PixelSpacing,
+      type: TYPES.DETECTOR,
+      isProjection,
+    };
+  } else if (
+    PixelSpacing &&
+    ImagerPixelSpacing &&
+    PixelSpacing !== ImagerPixelSpacing
+  ) {
+    // If Imager Pixel Spacing and Pixel Spacing are present and they have different values,
+    // then the user should be informed that these are "calibrated"
+    // (in some unknown manner if Pixel Spacing Calibration Type and/or
+    // Pixel Spacing Calibration Description are absent)
+    return {
+      PixelSpacing,
+      type: TYPES.CALIBRATED,
+      isProjection,
+      PixelSpacingCalibrationType,
+      PixelSpacingCalibrationDescription,
+    };
+  } else if (!PixelSpacing && ImagerPixelSpacing) {
+    let CorrectedImagerPixelSpacing = ImagerPixelSpacing;
+    if (EstimatedRadiographicMagnificationFactor) {
+      // Note that in IHE Mammo profile compliant displays, the value of Imager Pixel Spacing is required to be corrected by
+      // Estimated Radiographic Magnification Factor and the user informed of that.
+      // TODO: should this correction be done before all of this logic?
+      CorrectedImagerPixelSpacing = ImagerPixelSpacing.map(
+        (pixelSpacing) =>
+          pixelSpacing / EstimatedRadiographicMagnificationFactor
+      );
+    } else {
+      console.warn(
+        'EstimatedRadiographicMagnificationFactor was not present. Unable to correct ImagerPixelSpacing.'
+      );
+    }
+
+    return {
+      PixelSpacing: CorrectedImagerPixelSpacing,
+      isProjection,
+    };
+  } else if (
+    SequenceOfUltrasoundRegions &&
+    typeof SequenceOfUltrasoundRegions === 'object'
+  ) {
+    const { PhysicalDeltaX, PhysicalDeltaY } = SequenceOfUltrasoundRegions;
+    const USPixelSpacing = [PhysicalDeltaX * 10, PhysicalDeltaY * 10];
+
+    return {
+      PixelSpacing: USPixelSpacing,
+    };
+  } else if (
+    SequenceOfUltrasoundRegions &&
+    Array.isArray(SequenceOfUltrasoundRegions) &&
+    SequenceOfUltrasoundRegions.length > 1
+  ) {
+    console.warn(
+      'Sequence of Ultrasound Regions > one entry. This is not yet implemented, all measurements will be shown in pixels.'
+    );
+  } else if (isProjection === false && !ImagerPixelSpacing) {
+    // If only Pixel Spacing is present, and this is not a projection radiograph,
+    // we can stop here
+    return {
+      PixelSpacing,
+      type: TYPES.NOT_APPLICABLE,
+      isProjection,
+    };
+  }
+
+  console.warn(
+    'Unknown combination of PixelSpacing and ImagerPixelSpacing identified. Unable to determine spacing.'
+  );
+}

apps/aorta/src/modules/Root/Viewer/Crosshair/util/initCornerstoneDICOMImageLoader.js

@@ -0,0 +1,47 @@
+import dicomParser from 'dicom-parser';
+import * as cornerstone from '@cornerstonejs/core';
+import * as cornerstoneTools from '@cornerstonejs/tools';
+import cornerstoneDICOMImageLoader from '@cornerstonejs/dicom-image-loader';
+
+window.cornerstone = cornerstone;
+window.cornerstoneTools = cornerstoneTools;
+const { preferSizeOverAccuracy, useNorm16Texture } =
+  cornerstone.getConfiguration().rendering;
+
+export default function initCornerstoneDICOMImageLoader() {
+  // TODO: 此处非常的蛇皮
+  cornerstone.setUseSharedArrayBuffer(false)
+  cornerstone.setConfiguration({
+    detectGPUConfig: {
+      benchmarksURL: "http://localhost:9000"
+    }
+  })
+  cornerstoneDICOMImageLoader.external.cornerstone = cornerstone;
+  cornerstoneDICOMImageLoader.external.dicomParser = dicomParser;
+  cornerstoneDICOMImageLoader.configure({
+    useWebWorkers: true,
+    decodeConfig: {
+      convertFloatPixelDataToInt: false,
+      use16BitDataType: preferSizeOverAccuracy || useNorm16Texture,
+    },
+  });
+
+  let maxWebWorkers = 1;
+
+  if (navigator.hardwareConcurrency) {
+    maxWebWorkers = Math.min(navigator.hardwareConcurrency, 7);
+  }
+
+  var config = {
+    maxWebWorkers,
+    startWebWorkersOnDemand: false,
+    taskConfiguration: {
+      decodeTask: {
+        initializeCodecsOnStartup: false,
+        strict: false,
+      },
+    },
+  };
+
+  cornerstoneDICOMImageLoader.webWorkerManager.initialize(config);
+}

apps/aorta/src/modules/Root/Viewer/Crosshair/util/initDemo.js

@@ -0,0 +1,13 @@
+import initProviders from './initProviders.js';
+import initCornerstoneDICOMImageLoader from './initCornerstoneDICOMImageLoader';
+import initVolumeLoader from './initVolumeLoader';
+import { init as csRenderInit } from '@cornerstonejs/core';
+import { init as csToolsInit } from '@cornerstonejs/tools';
+
+export default async function initDemo() {
+  initProviders();
+  initCornerstoneDICOMImageLoader();
+  initVolumeLoader();
+  await csRenderInit();
+  await csToolsInit();
+}

apps/aorta/src/modules/Root/Viewer/Crosshair/util/initProviders.js

@@ -0,0 +1,17 @@
+import * as cornerstone from '@cornerstonejs/core';
+import ptScalingMetaDataProvider from './ptScalingMetaDataProvider';
+
+const { calibratedPixelSpacingMetadataProvider } = cornerstone.utilities;
+
+export default function initProviders() {
+  cornerstone.metaData.addProvider(
+    ptScalingMetaDataProvider.get.bind(ptScalingMetaDataProvider),
+    10000
+  );
+  cornerstone.metaData.addProvider(
+    calibratedPixelSpacingMetadataProvider.get.bind(
+      calibratedPixelSpacingMetadataProvider
+    ),
+    11000
+  );
+}

apps/aorta/src/modules/Root/Viewer/Crosshair/util/initVolumeLoader.js

@@ -0,0 +1,19 @@
+import { volumeLoader } from '@cornerstonejs/core';
+import {
+  cornerstoneStreamingImageVolumeLoader,
+  cornerstoneStreamingDynamicImageVolumeLoader,
+} from '@cornerstonejs/streaming-image-volume-loader';
+
+export default function initVolumeLoader() {
+  volumeLoader.registerUnknownVolumeLoader(
+    cornerstoneStreamingImageVolumeLoader
+  );
+  volumeLoader.registerVolumeLoader(
+    'cornerstoneStreamingImageVolume',
+    cornerstoneStreamingImageVolumeLoader
+  );
+  volumeLoader.registerVolumeLoader(
+    'cornerstoneStreamingDynamicImageVolume',
+    cornerstoneStreamingDynamicImageVolumeLoader
+  );
+}

apps/aorta/src/modules/Root/Viewer/Crosshair/util/ptScalingMetaDataProvider.js

@@ -0,0 +1,17 @@
+import { utilities as csUtils } from '@cornerstonejs/core';
+
+const scalingPerImageId = {};
+
+function addInstance(imageId, scalingMetaData) {
+  const imageURI = csUtils.imageIdToURI(imageId);
+  scalingPerImageId[imageURI] = scalingMetaData;
+}
+
+function get(type, imageId) {
+  if (type === 'scalingModule') {
+    const imageURI = csUtils.imageIdToURI(imageId);
+    return scalingPerImageId[imageURI];
+  }
+}
+
+export default { addInstance, get };

apps/aorta/src/modules/Root/Viewer/Crosshair/util/removeInvalidTags.js

@@ -0,0 +1,33 @@
+/**
+ * Remove invalid tags from a metadata and return a new object.
+ *
+ * At this time it is only removing tags that has `null` or `undefined` values
+ * which is our main goal because that breaks when `naturalizeDataset(...)` is
+ * called.
+ *
+ * Validating the tag id using regex like /^[a-fA-F0-9]{8}$/ make it run
+ * +50% slower and looping through all characteres (split+every+Set or simple
+ * FOR+Set) double the time it takes to run. It is currently taking +12ms/1k
+ * images on average which can change depending on the machine.
+ *
+ * @param srcMetadata - source metadata
+ * @returns new metadata object without invalid tags
+ */
+function removeInvalidTags(srcMetadata) {
+  // Object.create(null) make it ~9% faster
+  const dstMetadata = Object.create(null);
+  const tagIds = Object.keys(srcMetadata);
+  let tagValue;
+
+  tagIds.forEach((tagId) => {
+    tagValue = srcMetadata[tagId];
+
+    if (tagValue !== undefined && tagValue !== null) {
+      dstMetadata[tagId] = tagValue;
+    }
+  });
+
+  return dstMetadata;
+}
+
+export { removeInvalidTags as default, removeInvalidTags };

apps/aorta/src/modules/Root/Viewer/Crosshair/util/setCtTransferFunctionForVolumeActor.js

@@ -1,20 +1,16 @@
-import { VolumeActor } from "@cornerstonejs/core/dist/types/types";
-
 const windowWidth = 400;
 const windowCenter = 40;
 
 const lower = windowCenter - windowWidth / 2.0;
 const upper = windowCenter + windowWidth / 2.0;
 
-export const ctVoiRange = { lower, upper };
+const ctVoiRange = { lower, upper };
 
-export const setCtTransferFunctionForVolumeActor = ({
-  volumeActor,
-}: {
-  volumeActor: VolumeActor;
-}) => {
+export default function setCtTransferFunctionForVolumeActor({ volumeActor }) {
   volumeActor
     .getProperty()
     .getRGBTransferFunction(0)
     .setMappingRange(lower, upper);
-};
+}
+
+export { ctVoiRange };

apps/aorta/src/modules/Root/Viewer/StackViewer/index.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useRef } from "react";
 import { Enums, RenderingEngine, cache } from "@cornerstonejs/core";
-import { initCornerstone } from "../CornerstoneDicomLoader/initCornerstoneDicomImageLoader";
+import { initCornerstone } from "../CornerstoneDicomLoader/init";
 import { createImageIdsAndCacheMetaData } from "../CornerstoneDicomLoader/createImageIdsAndCacheMetaData";
 import {
   IStackViewport,
   PublicViewportInput,
 } from "@cornerstonejs/core/dist/types/types";
 
-interface VolumeViewerProps {
+interface StackViewerProps {
   children?: JSX.Element;
 }
 
@@ -21,7 +21,7 @@ const StudyInstanceUID =
 const SeriesInstanceUID =
   "1.3.12.2.1107.5.1.4.76315.30000021042706150001900118311";
 
-export const VolumeViewer = (props: VolumeViewerProps) => {
+export const StackViewer = (props: StackViewerProps) => {
   const dicomRef = useRef(null);
 
   const run = async () => {

apps/aorta/src/modules/Root/Viewer/index.tsx

@@ -1,7 +1,7 @@
-import { Corsshair } from "./Crosshair";
+import { CrosshairMpr } from "./Crosshair";
 import { DiffViewer } from "./DiffViewer";
 import { MprViewer } from "./MprViewer";
-import { VolumeViewer } from "./VolumeViewer";
+import { StackViewer } from "./StackViewer";
 
 interface RootViewerProps {
   children?: JSX.Element;
@@ -10,7 +10,8 @@ interface RootViewerProps {
 export const RootViewer = (props: RootViewerProps) => {
   return (
     <div>
-      <Corsshair />
+      <CrosshairMpr />
+      {/* <StackViewer /> */}
     </div>
   );
 };