feat: 添加mpr阅片模块

This commit is contained in:
mozzie 2024-09-12 15:52:05 +08:00
parent bb43e30a0d
commit 43f1de9d94
30 changed files with 397 additions and 857 deletions

View File

@ -71,6 +71,7 @@
"@cornerstonejs/dicom-image-loader": "1.84.4",
"@cornerstonejs/streaming-image-volume-loader": "1.84.4",
"dicomweb-client": "0.10.4",
"@cornerstonejs/calculate-suv": "1.1.0",
"dcmjs": "0.34.1"
},
"devDependencies": {

View File

@ -1,11 +1,17 @@
import { MenuItem } from "./type";
import { BrainCircuit, Package, HardDrive, Wrench } from "lucide-react";
import {
BrainCircuit,
Package,
HardDrive,
Wrench,
Rotate3DIcon,
} from "lucide-react";
export const menuItems: MenuItem[] = [
{ to: "/", name: "自动分析", icon: <BrainCircuit /> },
{ to: "/datasource", name: "数据列表", icon: <HardDrive /> },
{ to: "/viewer", name: "MPR阅片", icon: <Rotate3DIcon size={24} /> },
{ to: "/models", name: "模型管理", icon: <Package /> },
{ to: "/tools", name: "小工具", icon: <Wrench /> },
// { to: "/help", name: "帮助", icon: <IoHandLeftOutline size={24} /> },
// { to: "/setting", name: "设置", icon: <IoSettingsOutline size={24} /> },
];

View File

@ -1,126 +0,0 @@
import { Card } from "@/components/ui/card";
import {
Carousel,
CarouselContent,
CarouselItem,
} from "@/components/ui/carousel";
import {
EllipsisIcon,
FileDown,
Rotate3DIcon,
Sparkles,
Torus,
} from "lucide-react";
import { SeriesInfo } from "./type";
import { Badge } from "@/components/ui/badge";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
export type CarouselAction =
| "viewMpr"
| "view3D"
| "exportMeaurement"
| "viewReport";
interface CarouselSeriesProps {
seriesList: SeriesInfo[];
onClickItem?: (series: SeriesInfo, action: CarouselAction) => void;
}
export function CarouselSeries(props: CarouselSeriesProps) {
return (
<div className="mx-auto">
<Carousel orientation="vertical">
<CarouselContent>
{props.seriesList.map((series) => (
<CarouselItem key={series.ID} className="basis-1">
<Card
className={`flex shadow-none flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent`}
>
<div className="flex flex-col gap-1 w-full">
<div className="flex items-center">
<div className="flex items-center gap-2">
<div className="font-semibold">
{series.MainDicomTags.SeriesNumber}
</div>
</div>
<div className="ml-auto text-xs text-foreground">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<EllipsisIcon className="w-4 h-4" />
</DropdownMenuTrigger>
<DropdownMenuContent className="w-36">
<DropdownMenuGroup>
<DropdownMenuItem
onClick={() =>
props.onClickItem?.(series, "viewMpr")
}
>
MPR
<DropdownMenuShortcut>
<Rotate3DIcon className="w-4 h-4" />
</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() =>
props.onClickItem?.(series, "view3D")
}
>
3D
<DropdownMenuShortcut>
<Torus className="w-4 h-4" />
</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() =>
props.onClickItem?.(series, "exportMeaurement")
}
>
<DropdownMenuShortcut>
<FileDown className="w-4 h-4" />
</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() =>
props.onClickItem?.(series, "viewReport")
}
>
<DropdownMenuShortcut>
<Sparkles className="w-4 h-4" />
</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
<div className="line-clamp-2 text-xs text-muted-foreground">
<span>{series.MainDicomTags.SeriesDescription}</span>
</div>
</div>
<div className="line-clamp-2 text-xs text-muted-foreground flex gap-x-2">
<div className="flex items-center gap-2">
<Badge variant="secondary">{series.Instances.length}</Badge>
{series.MainDicomTags.BodyPartExamined && (
<Badge variant="secondary">
{series.MainDicomTags.BodyPartExamined}
</Badge>
)}
</div>
</div>
</Card>
</CarouselItem>
))}
</CarouselContent>
</Carousel>
</div>
);
}

View File

@ -1,246 +0,0 @@
import { useEffect, useRef } from "react";
import initDemo from "./util/initDemo.js";
import {
RenderingEngine,
Types,
Enums,
setVolumesForViewports,
volumeLoader,
getRenderingEngine,
} from "@cornerstonejs/core";
import * as cornerstoneTools from "@cornerstonejs/tools";
import createImageIdsAndCacheMetaData from "./util/createImageIdsAndCacheMetaData";
import { PublicViewportInput } from "@cornerstonejs/core/dist/types/types/IViewport.js";
import setCtTransferFunctionForVolumeActor from "./util/setCtTransferFunctionForVolumeActor";
import * as cornerstone from "@cornerstonejs/core";
const {
ToolGroupManager,
Enums: csToolsEnums,
CrosshairsTool,
StackScrollMouseWheelTool,
} = cornerstoneTools;
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
function getReferenceLineColor(viewportId) {
return viewportColors[viewportId];
}
function getReferenceLineControllable(viewportId) {
const index = viewportReferenceLineControllable.indexOf(viewportId);
return index !== -1;
}
function getReferenceLineDraggableRotatable(viewportId) {
const index = viewportReferenceLineDraggableRotatable.indexOf(viewportId);
return index !== -1;
}
function getReferenceLineSlabThicknessControlsOn(viewportId) {
const index =
viewportReferenceLineSlabThicknessControlsOn.indexOf(viewportId);
return index !== -1;
}
const renderingEngineId = "myRenderingEngine";
interface CrosshairMprProps {
// StudyInstanceUID: string;
// SeriesInstanceUID: string;
}
export const CrosshairMpr = (props: CrosshairMprProps) => {
const viewportId1Ref = useRef(null);
const viewportId2Ref = useRef(null);
const viewportId3Ref = useRef(null);
const renderingEngine = useRef<RenderingEngine>();
const imageIds = useRef<string[]>();
const run = async () => {
initDemo();
// Get Cornerstone imageIds for the source data and fetch metadata into RAM
imageIds.current = await createImageIdsAndCacheMetaData({
StudyInstanceUID:
"1.2.840.113564.118796721496052.50228.637325565454648183.8",
SeriesInstanceUID:
"1.3.12.2.1107.5.1.4.73399.30000020080900171669200001479",
wadoRsRoot: "http://localhost:8042/dicom-web",
});
// Define a volume in memory
const volume = await volumeLoader.createAndCacheVolume(volumeId, {
imageIds: imageIds.current ?? [],
});
// Instantiate a rendering engine
renderingEngine.current = new RenderingEngine(renderingEngineId);
// 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.current.setViewports(viewportInputArray);
console.log(volume);
// Set the volume to load
volume.load();
// Set volumes on the viewports
await setVolumesForViewports(
renderingEngine.current,
[
{
volumeId,
callback: setCtTransferFunctionForVolumeActor,
},
],
[viewportId1, viewportId2, viewportId3]
);
// Define tool groups to add the segmentation display tool to
const toolGroup = ToolGroupManager.createToolGroup(toolGroupId);
if (toolGroup) {
// 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.current.renderViewports([
viewportId1,
viewportId2,
viewportId3,
]);
};
useEffect(() => {
run();
cornerstoneTools.addTool(StackScrollMouseWheelTool);
cornerstoneTools.addTool(CrosshairsTool);
return () => {
// TODO: 是否需要写在组件,根据页面需要
console.log("卸载tool2");
cornerstoneTools.removeTool(StackScrollMouseWheelTool);
cornerstoneTools.removeTool(CrosshairsTool);
};
}, []);
useEffect(() => {
window.addEventListener("resize", () => {
renderingEngine.current?.resize();
});
}, []);
const test = () => {
// console.log(volumeLoader)
console.log(cornerstone.cache.getVolume(volumeId).getScalarData());
};
useEffect(() => {
document.addEventListener(Enums.Events.VOLUME_CACHE_VOLUME_ADDED, () => {
console.log(111);
});
}, []);
return (
<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>
<button onClick={test}></button>
</div>
);
};

View File

@ -1,20 +0,0 @@
import { useEffect } from "react";
import { SeriesInfo } from "../type";
import { CrosshairMpr } from "./Crosshair";
interface MprViewerProps {
series?: SeriesInfo;
}
function MprViewer(props: MprViewerProps) {
useEffect(() => {
if (props.series) console.log(props.series);
}, [props.series]);
return (
<div>
<CrosshairMpr />
</div>
);
}
export default MprViewer;

View File

@ -1,65 +0,0 @@
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 };

View File

@ -1,101 +0,0 @@
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;
}

View File

@ -1,136 +0,0 @@
// 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.'
);
}

View File

@ -1,41 +0,0 @@
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,
},
});
const config = {
maxWebWorkers: navigator.hardwareConcurrency ? Math.min(navigator.hardwareConcurrency, 7) : 1,
startWebWorkersOnDemand: false,
taskConfiguration: {
decodeTask: {
initializeCodecsOnStartup: false,
strict: false,
},
},
};
cornerstoneDICOMImageLoader.webWorkerManager.initialize(config);
}

View File

@ -1,13 +0,0 @@
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();
}

View File

@ -1,17 +0,0 @@
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
);
}

View File

@ -1,19 +0,0 @@
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
);
}

View File

@ -1,17 +0,0 @@
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 };

View File

@ -1,33 +0,0 @@
/**
* 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 };

View File

@ -7,16 +7,36 @@ import {
} from "@/components/ui/resizable";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Card } from "@/components/ui/card";
import { PatientInfo, SeriesInfo } from "./type";
import { CarouselAction, CarouselSeries } from "./CarouselSeries";
import { PatientInfo, SeriesInfo, StudyInfo } from "./type";
import { Input } from "@/components/ui/input";
import { Search } from "lucide-react";
import MprViewer from "./MprViewer";
import {
EllipsisIcon,
FileDown,
Rotate3DIcon,
Sparkles,
Torus,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useNavigate } from "react-router-dom";
interface SeriesClickItem {
action: "viewMpr" | "view3D" | "exportMeaurement" | "viewReport";
series: SeriesInfo;
}
export const Datasource = () => {
const rawPatientsRef = useRef<PatientInfo[]>([]);
const [patients, setPatients] = useState<PatientInfo[]>([]);
const [activeSeries, setActiveSeries] = useState<SeriesInfo>();
const navigate = useNavigate();
useEffect(() => {
window.ipcRenderer
@ -34,15 +54,22 @@ export const Datasource = () => {
});
}, []);
const onClickSeriesItem = (series: SeriesInfo, action: CarouselAction) => {
console.log(action, series);
switch (action) {
const onClickItem = (p: SeriesClickItem) => {
const activeStudy = patients
.find((p) => p.active)
?.children.find((s) => s.active);
const StudyInstanceUID = activeStudy?.MainDicomTags.StudyInstanceUID;
const SeriesInstanceUID = p.series.MainDicomTags.SeriesInstanceUID;
const query = `StudyInstanceUID=${StudyInstanceUID}&SeriesInstanceUID=${SeriesInstanceUID}`;
switch (p.action) {
case "viewMpr":
setActiveSeries(series);
navigate(`/viewer?${query}`, { replace: true });
break;
default:
break;
}
console.log(StudyInstanceUID, p.action, p.series);
};
const handlePatientSearch = (filterValue: string) => {
@ -158,12 +185,6 @@ export const Datasource = () => {
<div className="line-clamp-2 text-xs text-muted-foreground">
{study.MainDicomTags.InstitutionName}
</div>
<div className="w-full">
<CarouselSeries
seriesList={study.children}
onClickItem={onClickSeriesItem}
/>
</div>
</Card>
))}
</div>
@ -172,7 +193,91 @@ export const Datasource = () => {
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={52}>
<MprViewer series={activeSeries} />
<div className="flex flex-col h-full">
<ScrollArea className="flex-grow w-full h-full px-4 pb-2">
<div className="flex flex-col gap-y-2">
{patients.find((p) => p.active) &&
patients
.find((p) => p.active)
?.children.find((study) => study.active)
?.children.map((series) => (
<Card
key={series.MainDicomTags.SeriesInstanceUID}
className={`flex shadow-none flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent`}
>
<div className="flex flex-col gap-1 w-full">
<div className="flex items-center">
<div className="flex items-center gap-2">
<div className="font-semibold">
{series.MainDicomTags.SeriesNumber}
</div>
</div>
<div className="ml-auto text-xs text-foreground">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<EllipsisIcon className="w-4 h-4" />
</DropdownMenuTrigger>
<DropdownMenuContent className="w-36">
<DropdownMenuGroup>
<DropdownMenuItem
onClick={() =>
onClickItem({
series,
action: "viewMpr",
})
}
>
MPR
<DropdownMenuShortcut>
<Rotate3DIcon className="w-4 h-4" />
</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
3D
<DropdownMenuShortcut>
<Torus className="w-4 h-4" />
</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<DropdownMenuShortcut>
<FileDown className="w-4 h-4" />
</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<DropdownMenuShortcut>
<Sparkles className="w-4 h-4" />
</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
<div className="line-clamp-2 text-xs text-muted-foreground">
<span>
{series.MainDicomTags.SeriesDescription}
</span>
</div>
</div>
<div className="line-clamp-2 text-xs text-muted-foreground flex gap-x-2">
<div className="flex items-center gap-2">
<Badge variant="secondary">
{series.Instances.length}
</Badge>
{series.MainDicomTags.BodyPartExamined && (
<Badge variant="secondary">
{series.MainDicomTags.BodyPartExamined}
</Badge>
)}
</div>
</div>
</Card>
))}
</div>
</ScrollArea>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</div>

View File

@ -1,10 +1,14 @@
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 const initCornerstone = async () => {
initProviders();
initCornerstoneDICOMImageLoader();
initVolumeLoader();
await csRenderInit();
await csToolsInit();
};

View File

@ -2,17 +2,18 @@ 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.setUseSharedArrayBuffer(false);
cornerstone.setConfiguration({
detectGPUConfig: {
benchmarksURL: "http://localhost:9000",
// benchmarksURL: "http://localhost:9000",
},
rendering: cornerstone.getConfiguration().rendering,
isMobile: false,
enableCacheOptimization: false,
});
cornerstoneDICOMImageLoader.external.cornerstone = cornerstone;

View File

@ -0,0 +1,35 @@
export const renderingEngineId = "mprRenderingEngine";
export const viewportId1 = "CT_AXIAL";
export const viewportId2 = "CT_SAGITTAL";
export const viewportId3 = "CT_CORONAL";
export const toolGroupId = "group";
export const viewportColors = {
[viewportId1]: "rgb(200, 0, 0)",
[viewportId2]: "rgb(200, 200, 0)",
[viewportId3]: "rgb(0, 200, 0)",
};
export const viewportReferenceLineControllable = [
viewportId1,
viewportId2,
viewportId3,
];
export const viewportReferenceLineDraggableRotatable = [
viewportId1,
viewportId2,
viewportId3,
];
export const viewportReferenceLineSlabThicknessControlsOn = [
viewportId1,
viewportId2,
viewportId3,
];
// Define a unique id for the volume
export const volumeName = "CT_VOLUME_ID"; // Id of the volume less loader prefix
export const volumeLoaderScheme = "cornerstoneStreamingImageVolume"; // Loader id which defines which volume loader to use
export const volumeId = `${volumeLoaderScheme}:${volumeName}`; // VolumeId with loader id + volume id

View File

@ -0,0 +1,201 @@
import { useEffect, useRef } from "react";
import * as cornerstoneTools from "@cornerstonejs/tools";
import { PublicViewportInput } from "@cornerstonejs/core/dist/types/types/IViewport.js";
import { createImageIdsAndCacheMetaData } from "./CornerstoneDicomLoader/createImageIdsAndCacheMetaData";
import setCtTransferFunctionForVolumeActor from "./CornerstoneDicomLoader/setCtTransferFunctionForVolumeActor";
import {
RenderingEngine,
setVolumesForViewports,
volumeLoader,
Enums as CoreEnums,
} from "@cornerstonejs/core";
import {
viewportColors,
viewportReferenceLineControllable,
viewportReferenceLineDraggableRotatable,
viewportReferenceLineSlabThicknessControlsOn,
viewportId1,
viewportId2,
viewportId3,
toolGroupId,
volumeId,
renderingEngineId,
} from "./Crosshair.config";
import { initCornerstone } from "./CornerstoneDicomLoader/init";
const { ToolGroupManager, CrosshairsTool, StackScrollMouseWheelTool } =
cornerstoneTools;
const { ViewportType } = CoreEnums;
interface CrosshairMprProps {
children?: JSX.Element;
}
function getReferenceLineColor(viewportId: string | number) {
return viewportColors[viewportId];
}
function getReferenceLineControllable(viewportId: string) {
const index = viewportReferenceLineControllable.indexOf(viewportId);
return index !== -1;
}
function getReferenceLineDraggableRotatable(viewportId: string) {
const index = viewportReferenceLineDraggableRotatable.indexOf(viewportId);
return index !== -1;
}
function getReferenceLineSlabThicknessControlsOn(viewportId: string) {
const index =
viewportReferenceLineSlabThicknessControlsOn.indexOf(viewportId);
return index !== -1;
}
interface CrosshairMprProps {
StudyInstanceUID: string;
SeriesInstanceUID: string;
}
export const CrosshairMpr = (props: CrosshairMprProps) => {
const viewportId1Ref = useRef(null);
const viewportId2Ref = useRef(null);
const viewportId3Ref = useRef(null);
const renderingEngine = useRef<RenderingEngine>();
const imageIds = useRef<string[]>();
useEffect(() => {
const run = async () => {
imageIds.current = await createImageIdsAndCacheMetaData({
StudyInstanceUID: props.StudyInstanceUID,
SeriesInstanceUID: props.SeriesInstanceUID,
wadoRsRoot: "http://localhost:8042/dicom-web",
});
renderingEngine.current = new RenderingEngine(props.SeriesInstanceUID);
// Define a volume in memory
const volume = await volumeLoader.createAndCacheVolume(
props.SeriesInstanceUID,
{
imageIds: imageIds.current ?? [],
}
);
// Create the viewports
const viewportInputArray: PublicViewportInput[] = [
{
viewportId: viewportId1,
type: ViewportType.ORTHOGRAPHIC,
element: viewportId1Ref.current!,
defaultOptions: {
orientation: CoreEnums.OrientationAxis.AXIAL,
background: [0, 0, 0],
},
},
{
viewportId: viewportId2,
type: ViewportType.ORTHOGRAPHIC,
element: viewportId2Ref.current!,
defaultOptions: {
orientation: CoreEnums.OrientationAxis.SAGITTAL,
background: [0, 0, 0],
},
},
{
viewportId: viewportId3,
type: ViewportType.ORTHOGRAPHIC,
element: viewportId3Ref.current!,
defaultOptions: {
orientation: CoreEnums.OrientationAxis.CORONAL,
background: [0, 0, 0],
},
},
];
renderingEngine.current.setViewports(viewportInputArray);
// Set the volume to load
volume.load();
// Set volumes on the viewports
await setVolumesForViewports(
renderingEngine.current,
[
{
volumeId: props.SeriesInstanceUID,
callback: setCtTransferFunctionForVolumeActor,
},
],
[viewportId1, viewportId2, viewportId3]
);
const toolGroup = ToolGroupManager.createToolGroup(
props.SeriesInstanceUID
);
if (toolGroup) {
// 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, props.SeriesInstanceUID);
toolGroup.addViewport(viewportId2, props.SeriesInstanceUID);
toolGroup.addViewport(viewportId3, props.SeriesInstanceUID);
// 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.current.renderViewports([
viewportId1,
viewportId2,
viewportId3,
]);
};
if (!props.SeriesInstanceUID && !props.StudyInstanceUID) return;
run();
cornerstoneTools.addTool(StackScrollMouseWheelTool);
cornerstoneTools.addTool(CrosshairsTool);
return () => {
cornerstoneTools.removeTool(StackScrollMouseWheelTool);
cornerstoneTools.removeTool(CrosshairsTool);
ToolGroupManager.destroyToolGroup(props.SeriesInstanceUID);
};
}, [props.StudyInstanceUID, props.SeriesInstanceUID]);
useEffect(() => {
const resize = () => renderingEngine.current?.resize();
window.addEventListener("resize", resize);
return () => {
window.removeEventListener("resize", resize);
};
}, []);
return (
<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>
);
};

View File

@ -1,15 +1,27 @@
import { useLocation } from "react-router-dom";
import { initCornerstone } from "./MprViewer/CornerstoneDicomLoader/init";
import { CrosshairMpr } from "./MprViewer/Crosshair";
import { useEffect, useState } from "react";
export const Viewer = () => {
const [cornerstoneLoaded, setCornerstoneLoaded] = useState(false);
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const SeriesInstanceUID = queryParams.get("SeriesInstanceUID"); // 获取URL参数
const StudyInstanceUID = queryParams.get("StudyInstanceUID"); // 获取URL参数
useEffect(() => {
initCornerstone().then(() => setCornerstoneLoaded(true));
}, []);
return (
<div>
{SeriesInstanceUID}
<p>dicom的mpr方案</p>
{/* <DICOMViewer /> */}
{cornerstoneLoaded && StudyInstanceUID && SeriesInstanceUID && (
<CrosshairMpr
StudyInstanceUID={StudyInstanceUID}
SeriesInstanceUID={SeriesInstanceUID}
/>
)}
</div>
);
};

View File

@ -13,6 +13,9 @@ importers:
'@ant-design/icons':
specifier: ^5.4.0
version: 5.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@cornerstonejs/calculate-suv':
specifier: 1.1.0
version: 1.1.0
'@cornerstonejs/core':
specifier: 1.84.4
version: 1.84.4(@babel/preset-env@7.25.4(@babel/core@7.25.2))(autoprefixer@10.4.20(postcss@8.4.41))(webpack@5.94.0)(wslink@2.1.3)
@ -897,6 +900,10 @@ packages:
resolution: {integrity: sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==}
engines: {node: '>=6.9.0'}
'@cornerstonejs/calculate-suv@1.1.0':
resolution: {integrity: sha512-Q9XraiDJif9aMFArD2iEuDO/HXbcRVCqB7KfaHgDrdTTjgDFovS91Psbdim7crypRSvE6dh/+HKeFNHdvNkA6w==}
engines: {node: '>=10'}
'@cornerstonejs/codec-charls@1.2.3':
resolution: {integrity: sha512-qKUe6DN0dnGzhhfZLYhH9UZacMcudjxcaLXCrpxJImT/M/PQvZCT2rllu6VGJbWKJWG+dMVV2zmmleZcdJ7/cA==}
engines: {node: '>=0.14'}
@ -6298,6 +6305,8 @@ snapshots:
'@babel/helper-validator-identifier': 7.24.7
to-fast-properties: 2.0.0
'@cornerstonejs/calculate-suv@1.1.0': {}
'@cornerstonejs/codec-charls@1.2.3': {}
'@cornerstonejs/codec-libjpeg-turbo-8bit@1.2.2': {}